babel

安装 babel-loader

npm install babel-loader @babel/core @babel/preset-env -D @babel/core 包含 Babel 转换的核⼼ API @babel/preset-env 包含最新 JS 语法的转换规则 babel-loader Webpack 中，转换 JS 的加载器

babel 结构

打包 JS - 转译 - 图1

添加配置

const path = require(‘path’) module.exports = { mode: ‘none’, entry: ‘./src/main.js’, output: { filename: ‘bundle.js’, path: path.join(__dirname, ‘dist’), publicPath: ‘dist/‘ }, module: { rules: [ { test: /.m?js$/i, exclude: /node_modules/, // 排除不需要打包的⽬录 use: { loader: ‘babel-loader’, options: { presets: [‘@babel/preset-env’] } } } ] } } 启⽤ babel-loader 后 ES6+ 的语法会转成 ES5。但是 babel 只会对基本语法进⾏转移。像 promise 这样的⾼级语法，Babel 就不能转换。 ### polyfill #### 安装 npm i @babel/polyfill -D

使⽤

在⼊⼝⽂件中引⼊ @babel/polyfill import ‘@babel/polyfill’ // …… @babel/polyfill 会对所有的 JS 新语法进⾏转译（没⽤到的新语法也会被转译），因此打包后的 JS 会 ⾮常⼤

core-js

core-js 可以按需转译（即只转译⽤到的新语法）

安装

npm i core-js -D

使⽤

const path = require(‘path’) module.exports = { mode: ‘none’, entry: ‘./src/main.js’, output: { filename: ‘bundle.js’, path: path.join(__dirname, ‘dist’), publicPath: ‘dist/‘ }, module: { rules: [ { test: /.m?js$/i, exclude: /node_modules/, // 排除不需要打包的⽬录 use: { loader: ‘babel-loader’, options: { // presets: [‘@babel/preset-env’] presets: [ [ ‘@babel/preset-env’, { // 按需加载 useBuiltIns: ‘usage’, // 指定 core-js版本 corejs: { version: 3 }, // 指定兼容性做到哪个版本浏览器 targets: { chrome: ‘60’, firefox: ‘60’, ie: ‘9’, safari: ‘10’, edge: ‘17’ } } ] ] } } } ] } }