Webpack 配置 Babel

3 0 0

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

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

安装 Webpack

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

npm init -y

安装 webpack 和 webpack-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，例如 Map 、Promise 之类的还是无法转换。

如果要转换 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 代码了。

Webpack 和 Babel 是前端开发中常用的两个工具，但它们有不同的主要功能和定位：

Webpack

1、类型： 模块打包工具（ Module Bundler ）

2、主要功能：

打包： 将多个模块和资源文件打包成一个或多个输出文件。支持 JavaScript、CSS、图片、字体等各种类型的文件。
代码分割： 通过代码分割和懒加载，优化应用的性能。
加载器（ Loaders ）： 使用加载器将非 JavaScript 文件（如CSS、图片、TypeScript、Less 等）转换为模块。
插件（ Plugins ）： 使用插件扩展 Webpack 的功能，如压缩代码、注入环境变量、优化构建流程等。
开发服务器：提供开发服务器和热模块替换功能，提升开发体验。

3、典型配置：

入口文件和输出配置： 指定应用的入口文件和输出文件的路径。
加载器配置： 配置不同类型文件的加载器，如 babel-loader、css-loader、file-loader 等。
插件配置： 配置各种插件，如 HtmlWebpackPlugin、DefinePlugin 等。

Babel

1、类型： JavaScript 编译器（ JavaScript Compiler ）

2、主要功能：

语法转换： 将使用最新 JavaScript 语法的代码转换为旧版本的 JavaScript，以确保在所有浏览器和环境中都能运行。
Polyfills： 添加缺失的 JavaScript 特性，使现代代码在旧浏览器中也能运行。
插件和预设： 使用插件和预设来定义具体的转换规则，例如将 ES6 转换为 ES5。

3、典型配置：

配置文件（.babelrc 或 babel.config.js）： 指定需要使用的插件和预设，如 @babel/preset-env、@babel/plugin-transform-runtime 等。
与其他工具集成： 通常与 Webpack 等工具集成，作为 babel-loader 使用。

结合使用

在现代前端项目中，Webpack 和 Babel 通常会结合使用，发挥各自的优势：

Webpack：负责打包模块、处理各种资源文件、优化构建结果。
Babel：负责将使用现代 JavaScript 语法的代码转换为兼容性更好的旧版本代码。

示例配置：

1、安装必要的包：

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

2、配置 Webpack（ webpack.config.js ）：

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
  },
 module: {
 rules: [
      {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

3、配置 Babel（ .babelrc ）：