webpack——Babel

babel

• babel是一个JavaScript编译器，可以把EcmaScript6编译成EcmaScript5
• babel可以独立使用，但是独立使用没有意义，一般是和webpack结合到一起使用的

安装依赖：

npm install --save-dev babel-loader babel-core babel-preset-env

配置：

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,//不转换node_modules中的模块
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

babel-polyfill

• 默认babel只转化语法
• 我么可以使用babel-polyfill来转换EcmaScript6中的API

安装依赖：

npm i -D babel-polyfill 

配置：

entry: ['babel-polyfill','./src/main.js'],

这样的话就会在打包的结果中提供一个垫脚片用以兼容低版本浏览器中不支持的API。

• babel-runtime 解决代码重复问题

在打包过程中，babel会在某个包提供一些工具函数，而这些工具函数可能会重复出现在多个模块，这样会导致打包体积过大，所以babel提供了一个babel-transform-runtime来解决这个打包体积过大的问题。

安装：

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

配置：

{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins:['transform-runtime']//配置项
                    }
                }
            }