Webpack處理js資源(Eslint、Babel)
這里會(huì)有一個(gè)普遍性問題，就是js 資源 Webpack 本身就是可以處理的，為什么我們還要處理呢？
原因在于 Webpack 對(duì) js 處理是有限的，只能編譯 js 中 ES 模塊化語法，不能編譯其他語法，導(dǎo)致 js 不能在 IE 等瀏覽器運(yùn)行，所以我們希望做一些兼容性處理。
還有在開發(fā)過程中，開發(fā)團(tuán)隊(duì)是對(duì)代碼格式是有嚴(yán)格要求的，肉眼的檢測(cè)不僅局限且費(fèi)時(shí)費(fèi)力，我們需要使用專業(yè)的工具來檢測(cè)。代碼的檢測(cè)就是使用 Eslint，然后再由 Babel 做代碼兼容性處理。
Eslint代碼檢測(cè)
Eslint是可組裝的 JavaScript 和 JSX 檢查工具。也就是說它是用來檢測(cè) js 和 jsx 語法的工具，可以配置各項(xiàng)功能。我們使用 Eslint，關(guān)鍵是寫 Eslint 配置文件，里面寫上各種 rules 規(guī)則，將來運(yùn)行 Eslint 時(shí)就會(huì)以寫的規(guī)則對(duì)代碼進(jìn)行檢查。
1.Eslint的配置
它配置文件由很多種寫法：
- `.eslintrc.*`：新建文件，位于項(xiàng)目根目錄 - `.eslintrc` - `.eslintrc.js` - `.eslintrc.json` - 區(qū)別在于配置格式不一樣 - `package.json` 中 `eslintConfig`：不需要?jiǎng)?chuàng)建文件，在原有文件基礎(chǔ)上寫
主要配置上述一種方式，ESLint 會(huì)查找和自動(dòng)讀取它們。
這里以 `.eslintrc.js` 配置文件為例：
module.exports = {
// 解析選項(xiàng)
parserOptions: {},
// 具體檢查規(guī)則
rules: {},
// 繼承其他規(guī)則
extends: [],
// ...
};其他規(guī)則可參考開發(fā)文檔：https://eslint.bootcss.com/docs/user-guide/configuring
1.1 parserOptions 解析選項(xiàng)
parserOptions: {
ecmaVersion: 6, // ES 語法版本
sourceType: "module", // ES 模塊化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 項(xiàng)目，就需要開啟 jsx 語法
}
}1.2 rules 具體規(guī)則
- `"off"` 或 `0` - 關(guān)閉規(guī)則
- `"warn"` 或 `1` - 開啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：`warn` (不會(huì)導(dǎo)致程序退出)
- `"error"` 或 `2` - 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：`error` (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)
rules: {
semi: "error", // 禁止使用分號(hào)
'array-callback-return': 'warn', // 強(qiáng)制數(shù)組方法的回調(diào)函數(shù)中有 return 語句，否則警告
'default-case': [
'warn', // 要求 switch 語句中有 default 分支，否則警告
{ commentPattern: '^no default$' } // 允許在最后注釋 no default, 就不會(huì)有警告了
],
eqeqeq: [
'warn', // 強(qiáng)制使用 === 和 !==，否則警告
'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少數(shù)情況下不會(huì)有警告
],
}其他配置規(guī)則可參考開發(fā)文檔：https://eslint.bootcss.com/docs/rules/
具體繼承方式示例如下：
module.exports = {
extends: ["react-app"],
rules: {
// 我們的規(guī)則會(huì)覆蓋掉react-app的規(guī)則
// 所以想要修改規(guī)則直接改就是了
eqeqeq: ["warn", "smart"],
},
};2.Eslint在Webpack中的使用
2.1 下載對(duì)應(yīng)插件
npm i eslint-webpack-plugin eslint -D
2.2 定義配置文件
創(chuàng)建 .eslintrc.js 文件：
module.exports = {
// 繼承 Eslint 規(guī)則
extends: ["eslint:recommended"],
env: {
node: true, // 啟用node中全局變量
browser: true, // 啟用瀏覽器中全局變量
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {
"no-var": 2, // 不能使用 var 定義變量
},
};2.3.修改webpack.config.js配置文件
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); //引入Eslint插件
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/main.js", // 將 js 文件輸出到 static/js 目錄中
clean: true, // 自動(dòng)將上次打包目錄資源清空
},
module: {
rules: [
{
// 用來匹配 .css 結(jié)尾的文件
test: /\.css$/,
// use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的圖片會(huì)被base64處理
},
},
},
],
},
//插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查文件的根目錄
context: path.resolve(__dirname, "src"),
exclude:"node_modules", //排除node_module中的js文件
cache:true,//開啟緩存，提升代碼檢查速度
cacheLocation:path.resolve(__dirname,'../node_modules/.cache/esLintcach'),
}),
],
mode: "development",
};2.4輸出檢測(cè)結(jié)果
運(yùn)行如下指令，在控制臺(tái)即查看 Eslint 檢查效果
npx webpack
3.Eslint在VSCode中的使用
下載 Eslint 插件，即可不用編譯就能看到錯(cuò)誤，可以提前解決,但是此時(shí)就會(huì)對(duì)項(xiàng)目所有文件默認(rèn)進(jìn)行 Eslint 檢查了，我們 dist 目錄下的打包后文件就會(huì)報(bào)錯(cuò)。但是我們只需要檢查 src 下面的文件，不需要檢查 dist 下面的文件。
所以可以使用 Eslint 忽略文件解決。在項(xiàng)目根目錄新建下面文件:
`.eslintignore` ``` # 忽略dist目錄下所有文件 dist ```
Babel的使用
主要用于將 ES6 語法編寫的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中
1.Babel的配置
配置文件由很多種寫法： - `babel.config.*`：新建文件，位于項(xiàng)目根目錄 - `babel.config.js` - `babel.config.json` - `.babelrc.*`：新建文件，位于項(xiàng)目根目錄 - `.babelrc` - `.babelrc.js` - `.babelrc.json` - `package.json` 中 `babel`：不需要?jiǎng)?chuàng)建文件，在原有文件基礎(chǔ)上寫
Babel 會(huì)查找和自動(dòng)讀取它們，所以以上配置文件只需要存在一個(gè)即可，以 `babel.config.js` 配置文件為例：
module.exports = {
// 預(yù)設(shè)
presets: [],
};1.1 presets 預(yù)設(shè)
簡單理解：這就是一組 Babel 插件, 擴(kuò)展 Babel 功能
- `@babel/preset-env`: 一個(gè)智能預(yù)設(shè)，允許您使用最新的 JavaScript。
- `@babel/preset-react`：一個(gè)用來編譯 React jsx 語法的預(yù)設(shè)
- `@babel/preset-typescript`：一個(gè)用來編譯 TypeScript 語法的預(yù)設(shè)
2. Babel在webpack中的使用
2.1 下載對(duì)應(yīng)Loader
npm i babel-loader @babel/core @babel/preset-env -D
2.2 定義 Babel 配置文件
- babel.config.js
```js
module.exports = {
presets: ["@babel/preset-env"],
};
```2.3 修改webpack.config.js配置文件
這里其實(shí)就是在rules配置中新添加了一個(gè)處理js文件的規(guī)則：
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); //引入Eslint插件
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/main.js", // 將 js 文件輸出到 static/js 目錄中
clean: true, // 自動(dòng)將上次打包目錄資源清空
},
module: {
rules: [
{
// 用來匹配 .css 結(jié)尾的文件
test: /\.css$/,
// use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的圖片會(huì)被base64處理
},
},
},
//這是新添加的使用Babel兼容js語法的規(guī)則
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代碼不編譯
loader: "babel-loader",
},
],
},
//插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查文件的根目錄
context: path.resolve(__dirname, "src"),
exclude:"node_modules", //排除node_module中的js文件
cache:true,//開啟緩存，提升代碼檢查速度
cacheLocation:path.resolve(__dirname,'../node_modules/.cache/esLintcach'),
}),
],
mode: "development",
};2.4 運(yùn)行指令兼容js
npx webpack
打開打包后的 `dist/static/js/main.js` 文件查看，我們就會(huì)發(fā)現(xiàn)箭頭函數(shù)等 ES6 語法已經(jīng)轉(zhuǎn)換了
到此這篇關(guān)于Webpack處理js資源(Eslint、Babel)的文章就介紹到這了,更多相關(guān)Webpack處理js資源內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js正則匹配出所有圖片及圖片地址src的方法,涉及javascript正則匹配及頁面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
使用了移動(dòng)層，可里面的輸入框卻不能使用了，下面是解決方法需要的朋友可以參考下。2009-11-11
這篇文章主要介紹了微信小程序 授權(quán)登錄詳解（附完整源碼）,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
在Web開發(fā)中,有時(shí)候我們需要通過JavaScript來控制用戶的瀏覽器行為,其中之一就是關(guān)閉瀏覽器窗口,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript關(guān)閉窗口的4種方法,需要的朋友可以參考下2024-01-01
JS自定義函數(shù)對(duì)web前端上傳的文件進(jìn)行類型大小判斷
這篇文章主要介紹了JS自定義函數(shù)對(duì)web前端上傳的文件進(jìn)行類型大小判斷的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序開發(fā)app.json全局配置實(shí)戰(zhàn)指南
app.json文件是小程序的全局配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)app.json全局配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
學(xué)習(xí)JavaScript一定要知道的3個(gè)小技巧
這篇文章主要給大家分享的是學(xué)習(xí)JavaScript一定要知道的3個(gè)小技巧，通常在 Angular 或 React 項(xiàng)目中，code review 時(shí)看到一些老式的 JavaScript 代碼，就會(huì)將開發(fā)人員歸類為初學(xué)者，下面我們就來一起看看初學(xué)者需要知道的三個(gè)小技巧,需要的朋友可以參考一下2021-12-12
為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
如何在js中讓函數(shù)睡眠多少秒? 經(jīng)常會(huì)有Javascript初學(xué)者提出這樣的問題,自從js出現(xiàn)以來.2010-08-08
JS實(shí)現(xiàn)點(diǎn)擊Radio動(dòng)態(tài)更新table數(shù)據(jù)
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊Radio動(dòng)態(tài)更新table數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-07-07