使用 Babel 处理 ES6 语法（2）
babel/preset-env也可配备其他属性
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
// options: {
// presets: ['@babel/preset-env']
// }
options: {
presets: [['@babel/preset-env',{
targets:{
chrom:'67'
}
useBuiltIns:'usage'
}]]
}
}
},
//chrom:'67' 意思是这个项目打包会运行在大于67这个版本的浏览器下
//在打包过程中使用preset-env结合babel/polyfill要去把es6的语法编译es5语法
//这个过程你来看是否有必要做es6到es5的转换
//是否有必要我的代码里去注入promise/map这样的函数
//如果你发现chrom浏览器67以上的版本它里面对es的支持就很好了
//那其实就没有必要帮我们做es6转es5这样的操作了
//也没有必要去注入promise这样的方法了
//这样配置过后在打包main.js会变小点
//查看dist目录下的main.js最后一行
//包含const map
//因为在打包过程中我们发现chrom67版本以上的浏览器里面
//完全都支持es6了
//那么babel/polyfill以及preset-env就直接的忽略es6转es5
//当你学完了webpack以后，你会知道像vue/react
//这种代码实际上通过webpack打包之后会生成浏览器
//能够执行的es5原生的代码，在浏览器上直接运行
//但是你并不会知道我们的这种框架的代码是怎么被转换成es5代码的，
//babel
//--img插入
//如果你在开发一个第三方模块的时候，或者开发一个组件库的时候，
//你用这种babel/polyfill方案实际上是有问题的
//因为他在注入promise或者map方法的时候，
//它会通过全局变量的形式来注入，会污染全局环境，
//npm install --save-dev @babel/plugin-transform-runtime
//npm install --save @babel/runtime
//在options里面不做presets配置了
//用"plugins": ["@babel/plugin-transform-runtime"]
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
// options: {
// presets: ['@babel/preset-env']
// }
options: {
// presets: [['@babel/preset-env',{
// useBuiltIns:'usage'
// }]]
"plugins": [["@babel/plugin-transform-runtime",{
//"absoluteRuntime": false,
"corejs": 2, //默认false,一般填2
"helpers": true,
"regenerator": true,
"useESModules": false,
//"version": "7.0.0-beta.0"
}]]
}
}
},
//npx webpack打包
//"corejs": 2, 改成2，额外安装
//npm install --save @babel/runtime-corejs2
//如果只是业务代码
//webpack.config.js只需要配置
// presets: [['@babel/preset-env',{
// useBuiltIns:'usage'
// }]]
//
//src目录下的index.js最上边引入import '@babel/polyfill'
//如果写的是库下面的代码的时候
//使用@babel/plugin-transform-runtime这个插件
options: {
"plugins": [["@babel/plugin-transform-runtime",{
"corejs": 2, //默认false,一般填2
"helpers": true,
"regenerator": true,
"useESModules": false,
}]]
}
//src目录下的index.js最上边不用引入import '@babel/polyfill'
//这个插件的好处是它可以有效的避免presets的一个问题
//或者说polyfill的一个问题
//polyfill会污染全局环境
//plugin-transform-runtime会以闭包的形式去注入或者说
//间接的帮助组件去引入对应的内容
//它不存在污染这样的概念
//所以当你去写类库的时候不去污染全局环境是一个
//更好的方案
//这个时候用plugins是更加合理的
//babel对应的配置项会非常的多
//在根目录下创建.babelrc文件
//babel-loader里面options里面的内容放到.babelrc文件
总结
以前我们写代码的时候没办法写es6代码
因为es6代码打包完之后还是es6代码
不兼容低版本浏览器
所以我们希望借助babel在打包的过程中
把es6代码转成es5代码
babel官网-setup-webpack--查看过程
光转化还不够
有些promise包括map这样的东西还需要在低版本浏览器里被注入进来
怎么才能把这些方法或者变量注入进来呢
在入口js文件引入import '@babel/polyfill'
引入import '@babel/polyfill'会让我们的包变的很大
我们需要按需去引入babel/polyfill里面的内容
在webpack.config.js中配置useBuiltIns参数
useBuiltIns:'usage'
这种方案是在帮我们解决业务代码里使用babel的场景
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
//有的时候我们在生成第三方模块或者ui组件的时候
//我们生成的是一个库
//库打包的时候不希望babel去污染全局环境
//换一种打包方案
//babel官网--docs--transform-runtime
//配置内容发生改变
//src目录下的index.js不需要引入babel/polyfill
//在webpack.config.js中
//babel-loader执行plugins,采用transform-runtime这种形式做配置
//corejs:2 从false改为2，额外安装一个包
//当页面不存在primise方法map方法的时候它才会把代码打包到main.js里面
2.png
3.png
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode:'development', //开发者模式，默认SourceMap已经被配置进去了
devtool:'cheap-module-eval-source-map', //SourceMap关掉
entry:{
main:'./src/index.js',
},
devServe:{
contentBase:'./dist', //服务器起到哪个文件夹下
open:true,
port:8080,
hot:true, //
hotOnly:true
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
// options: {
// presets: ['@babel/preset-env']
// }
// options: {
// presets: [['@babel/preset-env',{
// useBuiltIns:'usage'
// }]]
options: {
"plugins": [["@babel/plugin-transform-runtime",{
"corejs": 2, //默认false,一般填2
"helpers": true,
"regenerator": true,
"useESModules": false,
}]]
}
}
},
{
test: /\.(jpg|png|gif)$/,
use:{
loader:'url-loader',
options:{
name:'[name]_[hash].[ext]',
outputPath:'images/',
limit:2048
}
}
},
{
test: /\.(eot|ttf|svg)$/,
use:{
loader: 'file-loader',
}
},
{
test: /\.scss$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'scss-loader',
'postcss-loader'
]
},
{
test: /\.scss$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template:'src/index.html'
}),
new HtmlWebpackPlugin(['dist'])],
new webpack.HotModuleReplacementPlugin(), //添加新的插件
output:{
filename:'bundle.js',
path:path.resolve(_dirname,'dist')
}
}
网友评论