babel使用入门以及使用webpack+babel来"编译"你的JS代码

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

官方推荐根据单个项目进行本地安装会更好一些。

这样做有两个主要的原因：

1. 同一机器上的不同的项目可以依赖不同版本的 Babel, 这允许你一次更新一个项目。
2. 这意味着在你的工作环境中没有隐含的依赖项。它将使你的项目更方便移植、更易于安装。

我们可以通过以下命令本地安装 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 webpack

npm install --save-dev webpack-cli

npm 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插件，可以看官网，这个项目的初步的配置就完成了。