- 現(xiàn)在我們來處理js模塊饭宾，比如es6語法轉(zhuǎn)換為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中使用箭頭函數(shù)
image.png -
npm run build可以看到打包后的js中箭頭函數(shù)轉(zhuǎn)換為es5了；
image.png
-
現(xiàn)在我們使用es6里面的 class
image.png
-
直接就報(bào)錯了捎琐，需要配置@babel/plugin-proposal-class-properties
image.png 我們到babel官網(wǎng)搜索這個(gè)插件在塔，https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
然后 按官網(wǎng)說的安裝
npm install --save-dev @babel/plugin-proposal-class-properties-
安裝好之后蛔溃，webpack.config.js中按官方配置
image.png
頁面控制臺正常打印了
image.png
-
現(xiàn)在我們要給class 類添加 @log 裝飾器
image.png
又報(bào)錯 提示需要裝飾器。
-
我們?nèi)abel 官網(wǎng)搜索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-
運(yùn)行代碼然后控制臺打印出來了
image.png
-
現(xiàn)在我們在a.js中再定義一個(gè)類以及一個(gè)generator;讓我們來看一下有什么需要改進(jìn)的雁比。
image.png
-
npm run build我們首先看打包后的js偎捎≤钏看一下class的問題程奠；在a模塊有個(gè)函數(shù)_classCallCheck處理class梦染，在index模塊也有一個(gè)函數(shù)_classCallCheck處理class.
a.js
index.js - 這里相同的函數(shù)沒有提取出來泛粹，如果有很多個(gè)模塊都拿會重復(fù)很多代碼肮疗；
- 我們繼續(xù)
npm run serve啟動頁面伪货。看一下控制臺宗侦；告訴我們r(jià)egeneratorRuntime is not defined
image.png - 原因也是打包的時(shí)候?qū)enerator進(jìn)行了轉(zhuǎn)換矾利，但是轉(zhuǎn)換之后并沒有這種幫助馋袜，所以報(bào)錯男旗。
- 我們開發(fā)環(huán)境安裝
npm install --save-dev @babel/plugin-proposal-class-properties以及生產(chǎn)環(huán)境需要的cnpm install --save @babel/runtime。 - 我們把webpack里面的babel配置拿到根目錄下欣鳖，創(chuàng)建.babelrc察皇；
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
現(xiàn)在啟動服務(wù)，控制臺不報(bào)錯了泽台，而且打包后也可以看到多了很多代碼什荣，就是把很多需要用的代碼提出來了。
-
現(xiàn)在我們在index.js中使用es7語法 image.png
打包后發(fā)現(xiàn)includes語法沒有轉(zhuǎn)換 ,現(xiàn)在我們需要一個(gè)模塊
cnpm install --save @babel/polyfill-
在使用的js中引入
image.png -
打包后可以在打包后的文件里看到师痕，Array.protype上添加了includes方法溃睹，就可以兼容不支持es7語法的瀏覽器了
image.png
- 現(xiàn)在我們可以給我們的js添加語法規(guī)范eslint;
cnpm i --save-dev eslint eslint-loader安裝-
webpck.config.js中配置
image.png 其中注意一下
enforce: 'pre'胰坟，意思是如果要匹配多個(gè)js時(shí)因篇，先執(zhí)行當(dāng)前這個(gè)js的匹配。-
然后打包笔横，可以看到 一些不符合eslint規(guī)范的代碼竞滓，后面可以自己慢慢改。我們現(xiàn)在這個(gè)不是重點(diǎn)吹缔，先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, // 并發(fā)打包
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先執(zhí)行 post后執(zhí)行
// }
// }
// },
{
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
}
]
]
}
