Babel是一个广泛使用的转码器，可以将ES6代码转为ES5，从而在现有的环境中执行。
这是一个开端，以后遇到问题，也会持续记录。
一、babel配置
官网有更详细的配置教程：https://www.babeljs.cn/docs/setup/#installation
我选择的是尝试CLI
1、新建一个文件夹做为项目文件夹，打开cmd，进入项目文件夹下，执行npm init（相关信息可以一路按回车，设置为默认信息），完成后会生成一个package.json文件
2、配置.babelrc文件
（1）使用命令行创建此文件，进入项目文件夹下，输入type nul>.babelrc；
（2）编写.babelrc文件内容
该文件用来配置转码规则和插件，基本格式如下：
{
"presets": [], //设置转码规则
"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
然后将这些规则加入.babelrc
{
"presets": [
"es2015",
"stage-2"
],
"plugins": []
}
3、安装babel-cli
官方推荐根据单个项目进行本地安装会更好一些。
这样做有两个主要的原因：
- 同一机器上的不同的项目可以依赖不同版本的 Babel, 这允许你一次更新一个项目。
- 这意味着在你的工作环境中没有隐含的依赖项。它将使你的项目更方便移植、更易于安装。
我们可以通过以下命令本地安装 Babel CLI:
在项目目录下输入 npm install --save-dev babel-cli
安装完成之后，改写package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
//编译整个 src 目录并将其输出到 lib 目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录
},
在根目录下必须有src文件夹，里面存放index.js文件，存放的是ES6代码，必须有lib文件夹，这是输出的文件夹。
转码的时候就执行npm run build，即src里面的index.js就输出到了lib中，这是转码后的文件。
二、babel-polyfill
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
cmd进入当前文件夹执行 npm install --save babel-polyfill
然后在index.js脚本的头部加上
import 'babel-polyfill';
// 或者
require('babel-polyfill');
三、使用webpack+babel来”编译”你的JS代码
webpack官方文档 https://webpack.docschina.org/guides/
1、在当前项目安装webpack，webpack-cli，babel-core，babel-loader
npm install --save-dev webpacknpm install --save-dev webpack-clinpm install --save-dev babel-core babel-loader
2、使用配置文件
在项目的根目录创建webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'lib'),
filename: 'index.bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
use:[
'babel-loader'
]
}
]
}
}
3、使用快捷方式运行webpack
修改package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
之后在命令行运行 npm run build 运行成功之后，即可在lib文件夹中找到index.bundle.js文件，此文件即为转换之后的文件。
更多webpack插件，可以看官网，这个项目的初步的配置就完成了。
