兼容IE webpack4 + Babel
相信大家对babel都不陌生， Babel就是可以让我们当前的项目中随意的使用最新的ES6和ES7的语法，兼容老版本浏览器(IE 手动滑稽)。
废话少说，下面咱们进入正题！
1.首先，node环境肯定是要有的，新建一个文件夹，然后 npm init -y，最后生成package.json文件。
2.安装核心依赖 npm install -D babel-loader @babel/core @babel/preset-env webpack webpack-cli
3.创建 webpack.config.js 和 .babelrc 文件，创建index.html，index.js 文件
//webpack.config.js
const path = require('path');
module.exports = {
//入口文件
entry: './index.js',
//输出位置
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
//模式 生产还是本地
mode: "production",
module: {
rules: [
//配置js文件处理规则
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
//.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"> 1%",
"last 2 versions"
]
}
}
]
]
}
4.在index.js 书写es6代码。
使用Polyfill 转换es6/7
npm install @babel/polyfill --save
在入口文件中引入 import "@babel/polyfill"
//index.js
import "@babel/polyfill";
const p1 = new Promise(res => {
console.log(1);
res(2);
});
const say = async PrmiseItem => {
let res = await PrmiseItem;
console.log(res);
};
say(p1);
let arr = [1, 2, 3];
let [index, index1, index2] = arr;
console.log(index, index1, index2);
5. npx webpack 进行打包
6.在index.html文件中引入打包好的js文件
<script src="./dist/index.js"></script>
