Eslint:js檢查工具Eslint

1.配置檔案

配置檔案有多種：

• .eslintrc.* (.eslintrc,.eslintrc.js,.eslintrc.json)
• package.json檔案裡的eslintConfig欄位指定配置

2.具體配置 （.eslintrc.js配置檔案為例）

module.exports = {
	root:true, //停止在父級目錄中尋找
	//解析器選項
	parserOptions:{
		ecmaVersion: 6,//ECMAScript 版本
		sourceType:'module',// ES 模組化
		ecmaFeatures:{ // ES 其他特性
			globalReturn: true,//允許在全域性作用域下使用 return 語句
			impliedStrict: true,//啟用全域性 strict mode
			jsx: true,//啟用 JSX
		}
	}
	//具體檢查規則 [規則文件](https://eslint.bootcss.com/docs/rules/)
	/*
		"off" 或 0 - 關閉規則;
		"warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程式退出)
		"error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程式會退出)
	*/
 	rules: {},

	//繼承其他規則
	extends:[]
}

3.在webpack中配置

const ESLintWebpackPlugin = require("eslint-webpack-plugin");

new ESLintWebpackPlugin({
      // 指定檢查檔案的根目錄
      context: path.resolve(__dirname, "src"),
    })

4…eslintignore： Eslint 忽略檔案

babel處理

1.下載包

npm i babel-loader @babel/core @babel/preset-env  core-js -D

2.配置檔案

配置檔案有多種：

• babel.config.*
  • babel.config.js
  • babel.config.json
• .babelrc.*
  • .babelrc
  • .babelrc.js
  • .babelrc.json
• packae.json配置babel欄位

3.配置（babel.config.js）

module.exports = {
  presets: ["@babel/preset-env"],
   // 按需載入core-js的polyfill
      { 
      	useBuiltIns: "usage", 
      	corejs: { 
      		version: "3",
      		 proposals: true
      	 } 
      	}
};

在webpack中

{
       test: /\.js$/,
       exclude: /node_modules/, // 排除node_modules程式碼不編譯
       loader: "babel-loader",
     },

壓縮js

optimization: {
   minimizer: [
     new TerserPlugin({
       parallel: true,
       terserOptions: {
         // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
       },
     }),
   ],
 }

js優化 optimization.splitChunks

optimization:{
	
}