前言：
解析es6是个很老，却又一直让初学者纠结的问题。
网上可以搜到很多，然而babel 更新还比较快，解决方式往往滞后或不统一。
如果你跟着webpack官方文档的babel-loader做，在使用babel-runtime 的时候还会报找不到依赖的错。
所以，在于遇到关于依赖的问题时，去寻找babel的官方文档是第一选择。
然而，babel 文档讲得比较精辟扼要，我就在此鞭辟入里一下。
babel 文档： https://babeljs.io/docs/en/ba…
一，es6 中，要解析的元素分为三类
- 最新ES 语法：比如，箭头函数 ()=>{}
- 最新ES API：比如，Promise
- 最新ES 实例方法：比如，includes
二，需要的babel 依赖
- @babel/core：babel的核心文件
- @babel/preset-env：对babel 功能的预设工具
-
@babel/runtime-corejs3：es6 的解析工具，此工具可解析所有的es6 元素。
- 若不需要解析实例方法，比如，includes，可使用 @babel/runtime-corejs2代替；
- 若最新ES AP也不需要解析，比如，Promise，可使用@babel/runtime 代替
- @babel/loader：动态加载模块
- @babel/plugin-transform-runtime：可复用babel，节省代码
三，加载的依赖
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
npm install -D @babel/plugin-transform-runtime webpack-cli
四，package.json
{
"name": "mydesk",
"version": "1.0.0",
"description": "",
"private": true,
"dependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/runtime-corejs3": "^7.5.5",
"babel-loader": "^8.0.0-beta.0",
"webpack": "^4.39.2"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.5.5",
"webpack-cli": "^3.3.6"
},
"scripts": {
"build": "webpack"
}
}
五，webpack配置文件 webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: ['./src/index.js'],
output: {
filename: 'bound.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test:/\.js$/,
use: {
loader: 'babel-loader',
}
},
]
}
};
六，babel 配置文件 .babel
{
"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"proposals": true,
"corejs": 3
}
]
]
}- proposals： 填充提案，使 corejs: 3 生效
-
corejs：对es6 的解析状态
- false，需安装 npm install –save @babel/runtime，默认状态
- 2，需安装 npm install –save @babel/runtime-corejs2
- 3，需安装 npm install –save @babel/runtime-corejs3
七，目录结构
index.js 测试
let b='abc'.includes('a');
console.log(b);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script src="./dist/bound.js"></script>
</body>
</html>
发表回复