版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82560837
一、基本介绍
首先我们需要注意, ES6/7对js语言不但在语法上做了扩充,其在api上也做了大量的扩展。在webpack中对于es6语法的转换我们可以使用babel-loader及相关依赖库来完成(但具体按照哪个规范来进行转换,需要参照于babel的preset)。但对于api的兼容,babel-loader是无法完成的,我们需要借助于babel的插件
(babel-polyfill babel-runtime babel-plugin-transform-runtime)。
二、babel配置
js文件
window.onload = ()=>{
console.log("window onload ing....");
const fn =()=>{
console.log("testES6")
};
fn()
}
webpack.config.js
const path = require("path");
module.exports={
entry:{
demo: "./js/index.js"
},
output:{
filename:"[name].min.[hash:5].js",
path:path.resolve(__dirname,"dist")
}
}
1、babel-loader
安装:
npm install --save-dev babel-loader babel-core
配置babel-loader:
module:{
rules:[
{
test:/\.js$/,
use:’ babel-loader’,
exclude:’/node_modules/’
}
]
}
配置后的webpack.config.js
const path = require("path");
module.exports={
entry:{
demo: "./js/index.js"
},
output:{
filename:"[name].min.[hash:5].js",
path:path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.js$/,
use: {
loader: 'babel-loader',
},
exclude: '/node_modules/'
}
]
}
}
2、 @babel/core
安装
npm install @babel/core --save-dev
3、Babel-presets
项目需要兼容的浏览器版本。
安装:Babel-presets
npm install babel-preset-env --save-dev
配置babel-loader:配置options
module:{
rules:[
{
test:/\.js$/,
use:{
loader: ’babel-loader’,
options:{
presets:[
[‘babel-preset-env’,{
targets:{
//browsers:[‘> 1%’,’last 2 version’]
chrome:52
}
}]
]
}
},
exclude:’/node_modules/’
}
]
}
配置后的webpack.config.js
扫描二维码关注公众号,回复:
3231549 查看本文章
const path = require("path");
module.exports={
entry:{
demo: "./js/index.js"
},
output:{
filename:"[name].min.[hash:5].js",
path:path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options:{
presets:[
['babel-preset-env',{
targets:{//浏览器版本控制
//browsers:['> 1%','last 2 version']
chrome:32
}
}]
]
}
},
exclude: '/node_modules/'
}
]
}
}
代码转换成功:
window.onload = function () {
console.log("window onload ing....");
var fn = function fn() {
console.log("testES6");
};
fn();
};
4、Babel-plugin:
1)es6全局衬垫代码
安装:es6全局衬垫代码
npm install babel-polyfill --save
配置:
直接在入口文件中 import ‘babel-polyfill’
2)es6局部衬垫代码
安装:es6局部衬垫代码
cnpm install babel-plugin-transform-runtime --save-dev
cnpm install babel-runtime --save
配置:
新建 .babelrc 文件
{
“presets”:[
[“babel-preset-env”,{
“targets”:{
“browsers” : [‘> 1%’]
}
}]
],
“plugins”:[“transform-runtime”]
}