上节目录如下:
基本用法
es6语法因为浏览器兼容性问题较多,本不能直接使用,但因为babel这种能降级es6+语法的工具,使得es6+已提前普及。先来写点es6语法。
src/index.js:
const promise = new Promise(function(resolve) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
然后npm run build, 打开ie浏览器(谷歌实在太先进鸟....):
明显IE不能完全失败es6语法,所以我们就需要将es6代码降级成es5甚至更低。
修改配置webpack.config.js:
// 省略依赖
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].js',
path: resolve(__dirname, 'bundles')
},
// 开启devServer
devServer: {},
module: {
rules: [{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: ['url-loader']
}, {
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}, {
test: /\.js$/,
// node_modules里的代码基本都是经过了编译的,所以忽略
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new CleanWebpackPlugin()
]
};
根目录下新建babel.config.js:
const presets = [
["@babel/env"]
];
module.exports = { presets };
然后安装依赖:
npm i @babel/core @babel/preset-env babel-loader -D
重新npm run dev,刷新ie:
还是不行,这是因为:
- babel-loader只识别.js文件,
- @babel/preset-env才是编译语法
- preset-env只会转换语法,并不会转换API。 对于ES6的内建功能(如 Promise / Set / Map),原型链的扩展(Array / Object等)需要用垫片库(polyfill)来支持。
所以再安装:npm i @babel/polyfill -D
scr/index.js引入:
import "@babel/polyfill";
// 省略
再次npm run dev刷新ie:
这样就有效果了。
babel还有非常多的配置和插件,比如:
babel.config.js:
const presets = [
["@babel/env", {
// 设置打包后的代码将在哪些浏览器运行?只针它们做转化
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
// 目前@babel/polyfill依赖的core-js@2,需要指定此选项并安装
corejs: 2,
/*
* @babel/polyfill会将所有高阶语法转化,配置useBuiltIns只转化项目中用到的语法
*797k => 291k
* 当useBuiltIns: "usage"时,入口文件就不需要import "@babel/polyfill"了
* 当useBuiltIns: "entry"时,需要在入口文件里import "@babel/polyfill"
* */
useBuiltIns: "usage"
}
]
];
module.exports = { presets };
本教程就不过多涉及了,最好的学习方式还是撸官网文档
下节:source-map
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。