1.1 为什么使用babel-loader
webpack本身只能加载、打包js模块,并不能将一些代码转化为浏览器识别的代码。
如今 ES6 语法在开发中已经非常普及,甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而,浏览器对这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行,Babel 应运而生。
Babel
是一个JavaScript编译器,能够让我们放心的使用新一代JS语法
1.2 使用babel-loader
npm install -D babel-loader @babel/core @babel/preset-env
-
babel-loader
:在webpack里应用 babel 解析ES6的桥梁 -
@babel/core
:babel核心模块 -
@babel/preset-env
:babel预设,内置一组 babel 插件的集合
在 webpack 配置对象中,需要将 babel-loader
添加到 module
列表中,就像下面这样
webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 排除编译 node_modules
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
src/test.js
export function getData () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World!')
}, 2000)
})
}
src/index.js
import {
getData } from './test.js'
const getList = async () => {
const data = await getData()
console.log('data:', data);
}
getList()
执行npx webpack-dev-server
命令打开控制台查看打印结果
报错了
1.3 regeneratorRuntime插件
regeneratorRuntime
是webpack打包生成的全局辅助函数,由babel生成,用于兼容async/await
的语法。
regeneratorRuntime is not defined
这个错误显然是未能正确配置babel
。
正确的做法需要添加以下的插件和配置:
# 这个包中包含了regeneratorRuntime,运行时需要
npm install --save @babel/runtime
# 这个插件会在需要regeneratorRuntime的地方自动require导包,编译时需要
npm install --save-dev @babel/plugin-transform-runtime
# 更多参考这里
https://babeljs.io/docs/en/babel-plugin-transform-runtime
webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 排除编译 node_modules
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime'],
}
}
}
]
}
执行npx webpack-dev-server
命令打开控制台查看打印结果,两秒后打印了"data: Hello World!"
源码地址:https://gitee.com/yanhuakang/webpack-test
如果有用,就点个赞吧(*^▽^*)