前端学习环境准备 (1)Babel

Babel 将 ES6 转换成 ES5 的语法, 更好的支持浏览器, 支持 JSX 语法转换.

Jspm, webpack 内置集成了 babel, 无需手动安装.

依赖

NodeJS, Npm

全局安装

npm install babel -g

项目中安装 babel 使用 npm install babel-core --save-dev

type 允许实时编译: index.html

<script src="node_modules/babel-core/browser.js"></script>
<script src="node_modules/babel-core/browser-polyfill.js"></script>
<script src="script.js" type="text/babel"></script>
<script src="script.jsx" type="text/jsx"></script>

删除全局 babel, 安装本地 babel

npm uninstall babel -g

npm install babel --save-dev

测试 babel 使用

./node_modules/.bin/babel source.js --out-file target.js

./node_modules/.bin/babel src [--watch] --out-dir lib [--source-maps]

./node_modules/.bin/babel src --out-file compiled.js

将常用命令放到 package.json 的 script 中, 方便执行.

插件们

npm install babel-plugin-transform-es2015-array-functions --save-dev

presets

npm install babel-preset-es2015 --save-dev

npm install babel-preset-react --save-dev

配置: .babelrc 文件.

1
2
3

{
  "presets": ["es2015", "react"]
}

集成 gulp (grunt, webpack)

npm install gulp gulp-bibel --save-dev

配置: gulpfile.js 文件.

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
  return gulp
    .src('src/*.js')
    .pipe(babel())
    .pipe(gulp.dest('lib'));
});