如何让高大上的ES6跑在客户端呢?
一、安装Node
去node的官网下载,在这就不写了。
二、安装 babel
npm install babel-cli -g
全局安装babel。
三、安装转化插件
到对应的文件夹下,初始化package.json。
npm init
在该目录下安装插件,用于将es6代码转化成es5。
npm install babel-preset-es2015 --save-dev
–save-dev 表示安装在本地开发依赖中。
四、创建.babelrc文件
window下可能无法创建未命名的文件,不过可以通过sublime创建。
在新建的.babelrc文件中输入:
{ presets: [es2015] }
五、使用
基本用法如下:
// 直接转码输出结果 babel some.js // 转码输出到一个文件,使用 -o 或 --out-file 参数 babel some.js -o es5.js babel some.js --out-file es5.js // 转码整个目,使用 -d 或 --out-dir 参数babel src -d lib babel src --out-dir lib // 生成source map文件使用 -s 参数 babel src -d lib -s
这样使用的话,是因为全局安装了babel。假如我们只在项目中安装了babel,那么可以先修改package.json,增加
{ // ... devDependencies: { babel-cli: ^6.7.5,babel-preset-es2015: ^6.6.0 },scripts: { build: babel src -d lib // 这里配置的是编译路径: src是原es6目录 lib是编译后的es5目录 },// ... }
需要转码的时候输入
npm run build
这样,我们就可以开始学习使用es6。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。