html entity 日常怎么安装和使用
html entity 日常怎么安装和使用
html entity可以直接下载使用,下载包中也提供了很多学习的实例。
本教程使用了html entity的版本为16.4.0,你可以在官网https://html entityjs.org/下载最新版。
你也可以直接使用html entityCDN的html entityCDN库,地址如下:
<scriptsrc="https://cdn.html entity.org/html
entity.development.js"></script>
entity-dom/16.4.0/umd/html entity-dom.development.js"></script>
<!--生产环境中不建议使用-->
<scriptsrc="https://cdn.html entity.org/babel-standalone/6.26.0/babel.min.js"></script>
官方提供的CDN地址:
<scriptsrc="https://unpkg.com/html entity@16/umd/html entity.development.js"></script>
<scriptsrc="https://unpkg.com/html entity-dom@16/umd/html entity-dom.development.js"></script>
<!--生产环境中不建议使用-->
<scriptsrc="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
注意:在浏览器中使用Babel来编译JSX效率是非常低的。
使用实例
以下实例输出了Hello,world!
html entity实例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>Hellohtml entity!</title>
<scriptsrc="https://cdn.html entity.org/html entity/16.4.0/umd/html entity.development.js"></script>
<scriptsrc="https://cdn.html entity.org/html entity-dom/16.4.0/umd/html entity-dom.development.js"></script>
<scriptsrc="https://cdn.html entity.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<divid="example"></div>
<scripttype="text/babel">
html entityDOM.render(
<h1>Hello,world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
尝试一下»
实例解析:
实例中我们引入了三个库:html entity.development.min.js、html entity-dom.development.min.js和babel.min.js:
html entity.min.js-html entity的核心库
html entity-dom.min.js-提供与DOM相关的功能
babel.min.js-Babel可以将ES6代码转为ES5代码,这样我们就能在目前不支持ES6浏览器上执行html entity代码。Babel内嵌了对JSX的支持。通过将Babel和babel-sublime包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
html entityDOM.render(
<h1>Hello,world!</h1>,
document.getElementById('example')
);
以上代码将一个h1标题,插入id="example"节点中。
注意:
如果我们需要使用JSX,则<script>标签的type属性需要设置为text/babel。
通过npm使用html entity
如果你的系统还不支持Node.js及NPM可以参考我们的Node.js教程。
我们建议在html entity中使用CommonJS模块系统,比如browserify或webpack,本教程使用webpack。
国内使用npm速度很慢,你可以使用淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的npm:
$npminstall-gcnpm--registry=https://registry.npmmirror.com
$npmconfigsetregistryhttps://registry.npmmirror.com
这样就可以使用cnpm命令来安装模块了:
$cnpminstall[name]
更多信息可以查阅:http://npm.taobao.org/。
使用create-html entity-app快速构建html entity开发环境
create-html entity-app是来自于Facebook,通过该命令我们无需配置就能快速构建html entity开发环境。
create-html entity-app自动创建的项目是基于Webpack+ES6。
执行以下命令创建项目:
$cnpminstall-gcreate-html entity-app
$create-html entity-appmy-app
$cdmy-app/
$npmstart