目录

Babel 是一个 JavaScript 的转译器。它的主要功能就是把 ES2015+ 的代码转换为 ES5 或更低版本的 JavaScript 代码。有了 Babel,您就可以使用最新的 JavaScript 语法,不用太担心浏览器的兼容问题。

之前简单写了一下 Babel 的使用,不过没有用到 Webpack,在使用模块和 polyfill 时候还是不太方便。这里就简单写一下 Webpack 配置 Babel 的方法。

安装 Webpack

如果您不太了解 Webpack 的话,可以先看一下 Webpack 简易使用指南 这篇文章。

创建一个以英文小写命名的文件夹,然后使用 npm 初始化项目:

npm init -y

安装 webpackwebpack-cli

npm install --save-dev webpack webpack-cli

安装完成后在 package.json 中的 script 中加入 "build": "webpack --config webpack.config.js" ,如下:

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

配置 Webpack

在项目根目录创建一个 webpack.config.js ,填写配置信息:

const path = require('path');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
};

上面设置的入口文件是项目目录下的 src/main.js ,输出文件的目录是项目目录下的 dist 目录。到这里 Webpack 就已经可以打包文件了,不过还不能转换 ES6 代码。

安装和配置 Babel

基本安装配置

安装 babel/core

npm install --save-dev @babel/core

babel/core 的主要功能就是调用 Babel 的 API 转码。

安装 babel-preset-env

npm install --save-dev @babel/preset-env

babel-preset-env 包含了一组常用的 ES6 预设。

因为要配合 Webpack 使用,所以还需要安装 babel-loader

npm install --save-dev babel-loader

在项目根目录创建一个 .babelrc 文件,添加 Babel 配置信息:

{
  "presets": [
    "@babel/preset-env"
  ]
}

webpack.config.js 中添加 Loader 配置:

const path = require('path');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        //  正则表达式匹配js文件
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
    ],
  },
};

到这里就可以转换基本的 ES6 语法了,不过 ES6 中新增的一些 API,例如 MapPromise 之类的还是无法转换。

babel/polyfill

如果要转换 ES6 中新增的 API 还需要安装 babel/polyfill

npm install --save-dev @babel/polyfill

安装完成后在 .babelrc 中添加配置信息:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "modules": false,
        "targets": {
          "browsers": "ie >= 8"
        }
      }
    ]
  ]
}

其中的 "useBuiltIns": "usage" 就是根据代码中包含的 API 按需引入 core-js ,可以减小文件体积。

"browsers": "ie >= 8" 就是最低支持到 IE8 浏览器。

现在使用 Webpack 打包后的代码就可以给老 IE 用了。

babel/plugin-transform-runtime

Babel 在转换一些 API 的时候需要定义辅助函数,如果多个文件中都用到了一个重复的 API ,Babel 就会定义很多个辅助函数。babel/plugin-transform-runtime 的主要功能就是把辅助函数拆分出来,可以让多个文件中重复的 API 调用同一个辅助函数。

安装 babel/plugin-transform-runtime

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

.babelrc 中添加配置信息:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "modules": false,
        "targets": {
          "browsers": "ie >= 8"
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": false
      }
    ]
  ]
}

到这里 Babel 就算是配置完成了,已经可以正常转换 ES6 代码了。

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/851/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年05月03日 ©著作权归作者所有

发表评论

正在加载 Emoji