YinXiaobo 的笔记

编译 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

← TypeScript 配置 →