基础(一)
1` Babel的配置文件是.babelrc
,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。
{"presets": [], "plugins": [] } } => {"presets": ["es2015", "react", "stage-2"], "plugins": [] } }
# ES2015转码规则
$ npm install
--save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
2` 各模块安装及功能
tr>浏览器环境
node环境 | |
---|---|
模块 | 功能 |
babel-cli | 用于命令行转码 (类似于requirejs的 r.js)(babel example.js --out-file|-o compiled.jsbabel src --out-dir|-d lib) |
babel-register | 改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码(然后,就不需要手动对index.js转码了。) |
babel-core | 某些代码需要调用Babel的API进行转码,就要使用这个模块 |
babel-preset-es2015 | ES2015转码规则 |
babel-preset-react | react转码规则 |
babel-polyfill | abel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象;如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片 |
浏览器环境 | |
模块 | 功能 |
babel-core@5 | Babel也可以用于浏览器环境。但是,从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以通过安装5.x版本的babel-core模块获取。(另一种方法是使用babel-standalone模块提供的浏览器版本) |
网页中实时将ES6代码转为ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。 |