| babel安装
| ES6转ES5 babel-preset-es2015
| jsx文件的转换 npm i babel-preset-react
| .babelrc 文件配置 presets来解析
| 加UMD模块，可以自带模块代码
插件
$ npm install babel-cli // babel的命令行cli
$ npm install --save-dev babel-preset-react // 转换JSX语法并去掉注释
.babelre配置 { "presets": ["env", "react", "stage-2"] }
$ npm install --save-dev babel-preset-env // 转义器将JS的 ES6、7转成ES5，官方废弃了ES2015/ES2016/ES2017使用babel-preset-env 来代替
.babelre配置 { "presets": ["env"] }
$ npm install --save-dev babel-loader // webpack的使用babel的加载器
$ npm install -save-dev babel-polyfill // babel默认只转新的javascript语法，不会转新的API, 如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，需要使用babel-polyfill
Babel
babel支持的使用场景非常多，可以在浏览器中使用（browser）也可以在命令行（cli），还可以是我们常见的gulp和webpack中
一、安装：
$ npm install babel-cli babel-preset-env // 包括了: babel、babel-node、babel-core、babel-register
// PolyFill 用于语法转换（如箭头函数）
$ npm install --save-dev babel-polyfill
// babel-preset-react用于JSX语法转换Flow
$ npm install --save-dev babel-preset-react // .babelrc中需要加react
$ touch .babelrc
{ "presets": ["env", "react"] }
1、babel-register模块改写require命令，为它加上一个钩子。require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。
npm install --save-dev babel-register
// 先加载babel-register，这样就会不在对index.js进行转码了
require("babel-register");
require("./index.js");
2、浏览器环境
下载babel-core: npm install babel-core@5
<!-- 引用browser.js -->
<script src="node_modules/babel-core/browser.js"></script>
<!-- type值为text/babel -->
<script type="text/babel">
// 这里写es6的代码
</script>
二、babel用处
1、将ES6转成ES5代码 babel-preset-es2015
npm i babel-preset-es2015 --save-dev
需要创建一个 .babelrc 文件
{
"presets": ["es2015"]
}
2、babel-polyfill: 可以在在浏览器直接解析 npm i babel-polyfill --save-dev
3、React的JSX代码: npm i babel-preset-react --save-dev
对.babelrc文件配置
{
"presets": ["es2015", "react"]
}
三、执行编译
# babel main.js // 将文件直接编译
# babel main.js --out-file main-component.js // 编译文件 - 将main.js编译成一个main-component.js, 缩定--out-file 写成 -o
# babel src --out-dir build // 编译目录 - 将src目录下的所有文件编译到build目录下，--out-dir简写 -d
# babel --watch main.js --out-file main-component.js --source-maps // --watch 侦听文件的变化，--source-maps 会在文件打出文件的目录, 简写 -w
# babel src --out-dir lib // 编译目录，src目录下的所有文件进行编辑并放到lib文件夹中
四、浏览器上直接编译 browser.js
可以直接转换，不需要执行编译命令
1、加载需要文件
babel-core/browser.js
babel-core/browser-polyfill.js // 修补浏览器工具的，浏览器不支持的时候需要它
2、<script>调用
type中必须写成 'text/babel'
<script src="main.js" type="text/babel"></script>
babel-cli
Babel 附带一个内置的 CLI，可用于从命令行编译文件, 用于执行命令
// 安装
$ npm install --save-dev babel-cli
// 执行
package.json中配置
"scripts": {
"build": "babel src -d build", // 通过babel将src目录下的文件全部转译到build目录
},
plugins
将运行代码分三个阶段：解析、转换、生成
.babelrc文件
{
"presets": [
"es2015", // es2015、es2016、es2017
"react",
"stage-2" // stage-0...stage-4
]
}
Stage-X 阶段
$ npm install --save-dev babel-preset-stage-0 // 安装
.babelrc
{
"presets": ["stage-0"]
}
Stage 0 - 稻草人: 只是一个想法，可能是 babel 插件
Stage 1 - 提案: 初步尝试
Stage 2 - 初稿: 完成初步规范
Stage 3 - 候选: 完成规范和浏览器初步实现
Stage 4 - 完成: 将被添加到下一年度发布
Balel 与 Gulp结合
// 安装gulp 和 gulp-bable包
$ npm i gulp gulp-babel --save
gulpFile:
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('babelTask', function(){
return gulp.src('./src/*.js')
.pipe(babel())
.pipe(gulp.dest('babelTask'))
})
gulp.task('default',['babelTask']);
Babel 与 Webpack结合
// 安装webpack和babel需要的包
$ npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev
webpack.config.js:
var webpack = require('webpack');
var path = require('path');
module.exports = {
/* 页面入口 - 单入口文件 */
entry: {
index : './src/js/webpackPackMain.js' // 单入口文件
},
output: {
path: './dist/js/',
filename: '[name].min.js?[hash]' // [hash] 将文件输出后加一个hash值
},
//加载器配置
module: {
loaders: [
<!-- { test: /\.css$/, loader: 'style-loader!css-loader'},
{ test: /\.js$/, loader: 'jsx-loader?harmony'},
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
// ?limit=8192 limit设置小于8k的图片转成64位编码，大小8于不会被转码
{ test: /\.(png|jpg|woff|eot|ttf|svg|gif)$/, loader: 'url-loader?limit=8192'}, -->
// es6转es5
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
};
| https://babel.docschina.org/ // 官网