背景：
兼容性測試流程中，遇到華為p9手機上的頁面按鈕點擊無反應的問題。開發者工具查看後發現報錯如下：
根據報錯信息檢查了一下頁面引用的vendors包，發現有...語法，來自於第三方依賴axios。
原因：
axios包有es6語法，而我的項目的webpack.config.js配置的babel-loader排除了所有的node_modules的編譯。如下：
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},這樣就不會編譯axios為es5。
解決方案：
babel-loader也需要編譯axios，配置如下：
{
test: /\.js$/,
exclude: /node_modules\/(?!(axios)\/).*/, // 僅轉譯axios等必要庫
use: {
loader: 'babel-loader'
},
},重新打包後，發現axios已被編譯為es5，頁面按鈕點擊正常，bug修復。
優化：
為了防止這個問題的再次發生，在webpack打包後加了一次是否是es5代碼的檢查，利用webpack-shell-plugin和es-check。
- webpack-shell-plugin 是一個 Webpack 插件，它允許你在 Webpack 構建過程的不同階段執行 shell 命令。
- es-check 是一個用於檢查 JavaScript 代碼是否符合指定 ECMAScript (ES) 版本規範的工具，可以幫助你在構建流程中確保代碼兼容性。
// webpack.config.js
const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
plugins: [
new WebpackShellPlugin({onBuildEnd:['npm run check-es5']})
],
}// package.json
"scripts": {
"check-es5": "es-check es5 './output/*.js'"
}這樣會在webpack打包之後，對打包的js文件做一次檢查。
