Webpack 之Babel
课程目标
- 打包命令webpack和devServer命令的区别
- babel是什么,做什么的?
- babel的优点?
- 浏览器的版本低可能不识别我们的js中的ES6的语法的解决方案
一、打包使用webpack命令和打包使用devServer命令的区别:
- 使用webpack命令打包的文件,会生成一个dist文件夹,文件夹下面有一个index.js文件,命令为npx webpack
- 使用devServer命令打包的文件,也会生成一个dist文件夹,但在dist文件夹下面并没有生成一个index.js文件,打包生成的文件实际保存到内存中,看不到。命令为:npm run start。
二、 babel是什么,做什么的?
Babel 是一个工具链,Babel是将ES6及以上版本的代码转换为ES5的工具。能够运行在当前和旧版本的浏览器或其他环境中,支持低版本浏览器的语法。
主要做的事情:
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
- 源码转换 (codemods)
三、babel的优点?
- Babel 构建在插件之上。插件又可以分为:
- 预设(preset):插件的封装版
- 插件(plugin):一个个转换插件
- 可调试 -由于 Babel 支持 Source map,因此你可以轻松调试编译后的代码。
- 符合规范
- Babel 尽最大可能遵循 ECMAScript 标准。不过,Babel - - -
- 还提供了特定的选项来对标准和性能做权衡。
- 代码紧凑
- Babel 尽可能用最少的代码并且不依赖太大量的运行环境。
- 有些情况是很难达成的这一愿望的,因此 Babel 提供了 "loose" 参数,用以在特定的转换情况下在符合规范、文件大小和速度之间做折中。
四、浏览器的版本低可能不识别我们的js中的ES6的语法的解决方案
- 使用babel,babel/core实际上是babel的核心库
- 使用babel的步骤
- 先下载npm install --save-dev babel-loader @babel/core
- 配置在webpack.cofig.js中
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules,
//node_modules的js文件不用ES6转化为ES5
loader: "babel-loader"
}
]
}
- 必须借助preset-env主要是这个模块将ES6转化Es5,下载 npm install @babel/preset-env --save-dev
- 配置在webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules,
//node_modules的js文件不用ES6转化为ES5
loader: "babel-loader" ,
//配置的是我的presets的模块,将ES6的语法转化为ES5的语法
options:{
presets:[["@babel/preset-env"]]
}
}
]
}
- 在低版本的浏览器,变量或者是函数翻译再对低版本浏览器的补充,使用@babel/polyfill来对变量和函数的补充
- 先下载安装 npm install --save @babel/polyfill
- 在src目录下的index.js引入,在业务逻辑代码的最顶部 import "@babel/polyfill";
polyfill打包后的文件会导致文件过大,全部都补充了
但我并不想全部都补充,之补充的是我的低端浏览器不支持的业务逻辑的代码 配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules,
//node_modules的js文件不用ES6转化为ES5
loader: "babel-loader" ,
//配置的是我的presets的模块,将ES6的语法转化为ES5的语法
options:{
presets:[["@babel/preset-env"],{
{
//对浏览器大于67的就不用进行转译,因为本身浏览器版本高的就支持,所以不用进行转译
targets:{
chrome:'67'
}
},
//根据业务逻辑来进行对js文件打包,对低版本的支持
useBuiltIns:"usage"
},
]
}
}
]
}
当我们使用polyfill进行开发内库,第三方模块,或开发第三方文件, 或这开发组件时,再注入变量,函数的时候会造成全局变量的污染,解决方案
- 先下载安装 npm install --save npm install --save-dev @babel/plugin-transform-runtime
- 配置
options:{
presets:[[" @babel/plugin-transform-runtime",
{
"corejs": 2,//需要提前安装下载 npm install --save @babel/runtime-corejs2
"helpers": true,//
"regenerator": true,//
"useESModules": false,//
}
]
}
@babel/plugin-transform-runtime插件的好处:
- 可以有效的避免polyfill的问题
- 避免全局变量的污染
注意:
"corejs": false,我将false改为2,就需要下载npm install --save @babel/runtime-corejs2
原因:
当我的代码中没有map(),promise()方法的时候,就会把代码打包到我的main.js中,如果不配置就不会打包到我的main.js文件中,还需要下载一个包:install --save @babel/runtime-corejs2
总结:当我只是业务逻辑的时候就是用"@babel/preset-env",
当我使用第三方和内库的时候就是用@babel/runtime-corejs2