- 现在我们来处理js模块，比如es6语法转换为es5语法。这里就需要babel-loader模块了。https://www.npmjs.com/package/babel-loader
- 安装
cnpm install -D babel-loader @babel/core @babel/preset-env -
webpack.config.js中配置
image.png
-
把模式改为development, 在index.js中使用箭头函数
image.png
-
npm run build可以看到打包后的js中箭头函数转换为es5了；
image.png
-
现在我们使用es6里面的 class
image.png
-
直接就报错了，需要配置@babel/plugin-proposal-class-properties
image.png
-
我们到babel官网搜索这个插件，https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
-
然后 按官网说的安装
npm install --save-dev @babel/plugin-proposal-class-properties -
安装好之后，webpack.config.js中按官方配置
image.png
页面控制台正常打印了
image.png
-
现在我们要给class 类添加 @log 装饰器
image.png
-
又报错 提示需要装饰器。
-
我们去babel 官网搜索decorators https://babeljs.io/docs/en/babel-plugin-proposal-decorators#class-decorator
image.png
-
直接看过来，放到webpack.config.js中。
-
安装
cnpm install --save-dev @babel/plugin-proposal-decorators -
运行代码然后控制台打印出来了
image.png
-
现在我们在a.js中再定义一个类以及一个generator;让我们来看一下有什么需要改进的。
image.png
-
npm run build我们首先看打包后的js。看一下class的问题；在a模块有个函数_classCallCheck处理class，在index模块也有一个函数_classCallCheck处理class.
a.js
index.js
- 这里相同的函数没有提取出来，如果有很多个模块都拿会重复很多代码；
- 我们继续
npm run serve启动页面。看一下控制台；告诉我们regeneratorRuntime is not defined
image.png
- 原因也是打包的时候对generator进行了转换，但是转换之后并没有这种帮助，所以报错。
- 我们开发环境安装
npm install --save-dev @babel/plugin-proposal-class-properties以及生产环境需要的cnpm install --save @babel/runtime。 - 我们把webpack里面的babel配置拿到根目录下，创建.babelrc；
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
image.png
现在启动服务，控制台不报错了，而且打包后也可以看到多了很多代码，就是把很多需要用的代码提出来了。
-
现在我们在index.js中使用es7语法
image.png
-
打包后发现includes语法没有转换 ,现在我们需要一个模块
cnpm install --save @babel/polyfill -
在使用的js中引入
image.png
-
打包后可以在打包后的文件里看到，Array.protype上添加了includes方法，就可以兼容不支持es7语法的浏览器了
image.png
- 现在我们可以给我们的js添加语法规范eslint;
-
cnpm i --save-dev eslint eslint-loader安装 -
webpck.config.js中配置
image.png
-
其中注意一下
enforce: 'pre'，意思是如果要匹配多个js时，先执行当前这个js的匹配。 -
然后打包，可以看到 一些不符合eslint规范的代码，后面可以自己慢慢改。我们现在这个不是重点，先webpack中注释掉。
image.png
-
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development', // development production
optimization: {
minimizer: [new UglifyJsPlugin(
{
cache: true, // 启用cache缓存
parallel: true, // 并发打包
sourceMap: true, // 映射原代码地址
}
), new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
entry: './src/index.js',
output: {
filename: "index.[hash:8].js",
path: path.resolve(__dirname, 'build')
},
devServer: {
port: 8080,
contentBase: './',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
}
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: { // 模块
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader']
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader', 'less-loader']
},
// {
// test: /\.js$/,
// exclude: /node_modules/,
// include: path.resolve(__dirname, 'src'),
// use:{
// loader: 'eslint-loader',
// options:{
// enforce: 'pre' // pre匹配到的js先执行 post后执行
// }
// }
// },
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env'],
// "plugins": [
// ["@babel/plugin-proposal-decorators", { "legacy": true }],
// ["@babel/plugin-proposal-class-properties", { "loose" : true }]
// ]
// }
}
}
]
}
}
- .babelrc
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
网友评论