Javascript编译器之Babel

官网

babel中文官网地址

安装

npm i babel-cli --save-dev
npm i babel-preset-env --save-dev
// 在根目录下添加配置文件.babelrc
{
  "presets": ["env"]
}

示例目录结构

image.png

编译命令

• 直接编译文件（会将结果直接输出到终端）

babel js/src/index.js

• 编译并输出结果到单个文件（-o为--out-file的缩写）

babel js/src/index.js -o js/dist/index.js

• 文件修改后自动编译（-w为--watch的缩写）

babel js/src/index.js -w -o js/dist/index.js

• 编译整个目录里的文件（-d为--out-dir的简写）

babel js/src -d js/dist

package.json中的编译命令

{
  "name": "Babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel js/src -d js/dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0"
  }
}

babel-polyfill

npm i babel-polyfill --save
// 该依赖为运行时所需要的

usage: 导入到需要编译的源文件模块中

import 'babel-polypill';