webpack编译ES6，ES7，babel-loader的使用

编译ES6 7

webpack 4.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x | babel-loader 7.x | babel 6.x
npm install -D babel-loader@7 babel-core babel-preset-env webpack

如果 babel-loader 是 8.0.0 之后的版本，需要安装指定版本的 @babel/core 与 @babel/preset-env

在配置文件中，涉及的配置项使用，也需要改为 @babel/preset-env这种形式的

• 需要安装的 loader babel-loader

  • 安装最新版的 npm install babel-loader
  • 一般安装 npm install --save-dev babel-loader babel-core

• 新建一个文件夹 demo，进入 cd demo ，然后初始化一下 npm init -y，完成后文件夹内会多一个 package.json和 package-lock.json 的配置文件。

• 安装需要的 loader 按上述命令安装即可。

• 安装完成后，在项目目录内创建 app.js index.html webpack.config.js

  

• 编辑 webpack.config.js 配置文件，增加入口 entry 与出口 output

    module.exports = {
    	entry: {
        app: './app.js'
      },
      output: {
        filename: '[name].[hash:5].js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            use: 'babel-loader',
            exclude:'/node_modules/'
          }
        ]
      }
    }
  

• 此时还需要一个 babel-presets 规范的插件

  • npm install @babel/preset-env --save-dev 如果 babel-loader 是安装的8.x版本，就使用这一句。
  • npm install babel-preset-env --save-dev 如果babel-loader 是安装的7.x，就使用这一句。

• 安装完成后，我们需要给我们安装的 loader 指定一个 preset 。

  • 修改 use

    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 1%', 'last 2 versions']
            }
          }]
        ]
      }
    },
    

• 在 app.js 文件中添加一些东西，来打包编译一下。

  let func = () => { }
  const NUM = 45
  let arr = [1, 2, 4]
  let arrB = arr.map(item => item * 2)
  
  console.log('new Set(arrB)', new Set(arrB));
  

• 运行 webpack 打包成功

  PS D:\test\my-webpack\3-3> webpack
  Hash: c51e1f6c979a6f1f782b
  Version: webpack 3.10.0
  Time: 565ms
         Asset     Size  Chunks             Chunk Names
  app.c51e1.js  2.68 kB       0  [emitted]  app
     [0] ./app.js 186 bytes {0} [built]
  

• 但是此时我们观察一下打包好的文件，发现有些还是没有转换。只能针对语法进行了转换，而针对低版本浏览器没有的函数和方法是没有转换的，所以还需要两个插件。

  • Babel Polyfill
    全局垫片，引入之后会在全局进行变量定义，可以理解为会污染全局变量。为开发应用准备的插件。
    使用方法：
    npm install @babel/polyfill --save

  • Babel Runtime Transform
    局部垫片，为了开发框架而准备的，不会污染全局。
    使用方法：
    npm install @babel/plugin-transform-runtime --save-dev

    npm install @babel/runtime --save

• 这里把上述的插件都安装上

  npm install @babel/polyfill @babel/runtime --save

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

• 使用 @babel/polyfill 时，在 app.js (入口文件)中 import @babel/polyfill
  这时再打包文件，会发现文件非常大，那我们使用一下 @babel/runtime

• 使用 @babel/runtime 时，在根目录 新建 .babelrc 文件 用来配置。

  • 把 webapck.config.js文件 module 中的 presets 移动到 .babelrc 文件中。
    再增加一个 plugins , 把刚刚安装的 @babel/plugin-transform-runtime 配置上。

  {
    "presets": [
      ["@babel/preset-env",
        {
          "targets": {
            "browsers": ["> 1%", "last 2 versions"]
          }
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  }
  

• 运行 webpack 打包成功

   PS D:\test\my-webpack\3-3> webpack
   Hash: 04b45de1843b1e27155f
   Version: webpack 3.10.0
   Time: 1627ms
          Asset     Size  Chunks             Chunk Names
   app.04b45.js  73.2 kB       0  [emitted]  app
     [60] ./app.js 386 bytes {0} [built]
       + 121 hidden modules
  

  查看新编译的文件，找到自己写的代码，发现已经全部被转换了。

一般在应用开发中，我们只需要使用 Babel Polyfilll 在入口文件中 import 'babel-polyfill' 就可以使用ES6 这些新语法了。在开发框架之类的，需要给其他人用的，就需要使用 Babel Runtime Transform