12-webpack-babel介绍
-
目前部分浏览器和 Node.js 已经支持 ES6,但由于它们对 ES6 所有的标准支持不全,这导致在开发中不敢全面地使用 ES6。——为了兼容IE浏览器优化
-
Babel 是一个 JavaScript 编译器,能将 ES6 代码转为 ES5 代码,让你使用最新的语言特性而不用担心兼容性问题,把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码。
-
英文官网:https://babeljs.io/
中文官网:https://www.babeljs.cn/
13-webpack-babel使用
在webpack官网-搜索关键字 babel-loader
babel-loader加载器插件包:https://webpack.js.org/loaders/babel-loader/#root
第一步:命令行安装包
npm install -D babel-loader @babel/core @babel/preset-env
第二步:webpack.config.js中配置文件即可
module: {
rules: [
{
//test 解析ES6语法为ES5语法
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //排除 第三方包
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
第三步:命令行运行代码,打包
npm run build
打包成功后,main.js文件中会看到cost—>var,箭头函数转普通函数等语法;
说明babel插件包,已经验证生效
附:
以上操作是语法解析,但是ES6还更新了一些高阶函数。此时,需要依赖另一个包polyfill
见babel官网—>Docs—>polyfill
中文版 https://www.babeljs.cn/docs/babel-polyfill
第四步:命令行 安装polyfill
npm install --save @babel/polyfill
使用:必须优先导入模块,之后的js才可以使用当前模块提供的函数(实现了ES6提供的高阶函数)
第五步:为了支持ES6高阶函数,在src/index.js中首行导入
import "@babel/polyfill";
或者:
module.exports = {
entry: ["@babel/polyfill", "./src/index.js"],
};
第六步:命令行运行代码,打包
npm run build
打包成功后,命令行中显示main.js的内存增大到456kb左右