[TOC] ### 支持`let`、`const`、箭頭函數等 ``` yarn add --dev @babel/core @babel/preset-env ``` 安裝用于Babel的Webpack Loader [babel-loader文檔](https://webpack.docschina.org/loaders/babel-loader/) ``` yarn add --dev babel-loader ``` 在`webpack.config.js`中配置`babel-loader` ``` module.exports = { module: { rules: [ ...... { test: /\.(js)$/, exclude: /node_modules/, loader: 'babel-loader' } ] } } ``` 在`package.json`的同級目錄新建`.babelrc`文件 ``` { "presets": [ "@babel/preset-env" ], "plugins": [] } ``` 此時我們寫的代碼中的es6與語法已經被轉換了，但`webpackBootstrap`中的還沒有轉換，需要在`webpack.config.js`中配置target為false ```js module.exports = { // ... target: false, }; ``` [target文檔](https://webpack.docschina.org/configuration/target/#root) ***** ### 支持類`class` ``` yarn add --dev @babel/plugin-proposal-class-properties ``` 配置`.babelrc` ``` { "presets": [ "@babel/preset-env" ], "plugins": ["@babel/plugin-proposal-class-properties"] } ``` ### 支持`[].includes()`、`Promise`等 ``` yarn add --dev @babel/plugin-transform-runtime yarn add --dev @babel/runtime-corejs3 ``` 配置`.babelrc` ``` { "presets": [ "@babel/preset-env" ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3 } ], "@babel/plugin-proposal-class-properties" ] } ``` ### 在`async`函數外部使用`await`字段 在`webpack.config.js`中添加 ```js module.exports = { // ... experiments: { topLevelAwait: true } }; ```