在 WebPack 中使用 Babel 优化前端项目
随着前端技术的不断更新，我们不得不面对的问题就是浏览器兼容性，即使是基础的 ES6 语法在不同版本的浏览器中表现也不尽相同。而 Babel 工具则是解决这个问题的有效途径，它可以将高级语法转化为低级语法从而兼容运行在各种浏览器中。
那么在 Webpack 中如何使用 Babel 呢？让我们逐步进行讲解。
第一步：安装与配置
安装 babel-loader，babel-core 和 babel-preset-xxx（xxx 取决于你使用的是什么语法），这些都是必需品。
npm install babel-loader babel-core babel-preset-env --save-dev
Webpack 2+ 中支持了几种模块语法，需要使用到 Babel 插件，具体如下：
npm install babel-plugin-syntax-dynamic-import babel-plugin-transform-runtime --save-dev
接着，在 webpack 配置文件 webpack.config.js 中进行相应的配置：
module.exports = { entry: {}, output: {}, resolve: {}, module: { rules: [ { test: /.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'], plugins: [ 'syntax-dynamic-import', 'transform-runtime' ] } } } ] } }
第二步：配置 .babelrc 文件
.babelrc 是 Babel 的配置文件，可以在其中的 presets 和 plugins 中配置 Babel。
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": [">1%", "last 2 versions", "not ie <= 8"] } }], "react" ], "plugins": [ "syntax-dynamic-import", "transform-runtime" ] }
这里的 env 前缀代表了环境，这里我们用它来表达 babel-preset-env，也就是 Babel 常用的套餐，它可以根据配置的 targets 来自动选择需要转译的语法。
第三步：就是一些细节问题了
我们可能还需要加一些 options，比如在开发环境下不自动生成文件，但在正式环境下需要生成文件：
{ test: /.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'], plugins: [ 'syntax-dynamic-import', 'transform-runtime' ], // 如果是开发环境，则不自动生成文件 cacheDirectory: process.env.NODE_ENV === 'development' } } }
关于 babel-preset-env 的 targets
- chrome：58
- edge：14
- firefox：54
- safari：10
- ie：11
- ios：10
- node：6.11.5
另外一些语言配置
- babel-preset-es2015：某种程度上被 env 取代，广泛使用。
- babel-preset-react：JSX 转化为 JS 的插件。
- babel-preset-stage-0：当前尚不被 ECMAScript 规范包含在内的新特性。
这里只是一些常用的 Babel 套餐，具体还需根据需求进行配置。
示例代码
在 main.js 文件中写下 ES6 的语法：
const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c);
在 babel-loader 编译之前的代码：
const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c);
在进行 Babel 编译后的代码：
'use strict';
var arr = [1, 2, 3]; var a = arr[0], b = arr[1], c = arr[2];
console.log(a, b, c);
以上就是在 WebPack 中使用 Babel 优化前端项目的详细步骤，希望可以提高大家的技术水平并为实际开发带来指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d65090a941bf7134c05631
