安装:
#本地安装
美元npm安装——save-dev webpack webpack-cli
#全局安装
美元npm安装- g webpack webpack-cli
在项目根目录下新建一个配置文件——webpack.config。js文件:
const path=要求(“路径”);
模块。出口={
模式:“没有”,
条目:“。/src/index.js ',
输出:{
文件名:“bundle.js”,
路径:路径。解决(__dirname,“距离”)
}
}
在src目录下新建一个。js文件:
出口const isNull=val=比;val===null
出口const独特的arr==比;[…新的(arr)]
在src目录下新建索引。js文件:
从“进口{isNull,独特的}。/a.js '
const arr=[1, 1, 2, 3]
console.log(独特(arr))
console.log (isNull (arr)
执行编译打包命令,完成后打开包。js文件发现isNull和独特的两个函数没有被编译,和webpack官方说法一致:webpack默认支持ES6模块语法,要编译ES6代码依然需要巴别塔编译器。
使用巴贝尔必须先安装@babel/核心和@babel/preset-env两个模块,其中@babel/核心是巴别塔的核心存在,巴别塔的核心api都在这个模块里面,比如:变换。而@babel/preset-env是一个智能预设,允许您使用最新的JavaScript,而无需微观管理您的目标环境需要哪些语法转换(以及可选的浏览器polyfill)。因为这里使用的打包工具是Webpack,所以还需要安装babel-loader插件。
安装:
美元npm安装——save-dev @babel/核心@babel preset-env babel-loader
新建.babelrc文件:
{
“预设”:(
“@babel/preset-env”
]
}
之前
修改webpack配置文件(webpack.config.js):
const path=要求(“路径”);
模块。出口={
模式:“没有”,
条目:“。/src/index.js ',
输出:{
文件名:“bundle.js”,
路径:路径。解决(__dirname,“距离”)
},
模块:{
规则:[
{
测试:/\ . js/美元,
装载机:“babel-loader”,
排除:/node_modules/}
]
}
}
之前
由于巴别塔默认只转换ES6新语法,不转换新的API,如:设置,地图,承诺等,所以需要安装@babel/polyfill转换新API。安装@babel/plugin-transform-runtime优化代码,@babel/plugin-transform-runtime是一个可以重复使用巴贝尔注入的帮助程序代码来节省代码的插件。
安装@babel/polyfill @babel/plugin-transform-runtime两个插件:
美元npm安装——save-dev @babel/polyfill @babel/plugin-transform-runtime
修改.babelrc配置文件:
{
“预设”:(
[" @babel/preset-env ", {
“useBuiltIns”:“使用”,//在每个文件中使用polyfill时,为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。
“模块”:假//启用将ES6模块语法转换为其他模块类型,设置为假不会转换模块。
})
),
“插件”:(
[" @babel/plugin-transform-runtime ", {
“助手”:假的
})
]
}
之前
最后,配置兼容的浏览器环境。在.babelrc配置文件中设置目标属性:
{
“预设”:(
[" @babel/preset-env ", {
“useBuiltIns”:“使用”,
“模块”:假的,
"目标":{
“浏览器”:“去年2版本,不是ie & lt;=9”
}
})
),
“插件”:(
[" @babel/plugin-transform-runtime ", {
“助手”:假的
})
]
}
执行命令编译代码,完成后检查包。js文件,是否成功转换新API。如果发现以下代码即说明转换成功:
//23.2对象
模块。出口=__webpack_require__(80)(集,函数(){
返回函数集(){返回(这个参数。长度比;0 & # 63;参数[0]:未定义);};
},{//23.2.3.1 Set.prototype.add(值)
添加:添加功能(价值){
返回strong.def(验证(集),价值=https://www.yisu.com/zixun/value===0 ?0:价值、价值);
}
},强);
之前
其他关于js压缩和Webpack启用树摇晃功能的设置本文不在赘述。
