前端常用開發工具的路徑解析配置

2021-09-11 11:00:17 字數 2073 閱讀 3745

題注：本文是 webpack cheatsheet | webpack 基礎與實踐清單的一部分，專案**可以參考 fe-boilerplate | 多技術棧前端專案模板。

隨著需求的迭代與功能的完善，我們的專案也會愈發龐大而複雜，目錄層級結構也會不斷深化；以 react 實踐清單中討論的 react 專案組織方式為例，我們常會分為 components, containers, services, apis, ducks, store, i18n 等等目錄，如果全部以相對路徑方式引入，可能會變成這個樣子：

import react from


'react';


import from


'react-redux';


import from


'./../../config/constants';


import mycomponent from


'./../../../components/mycomponent';


import from


'./../../../ducks/somereducer';


複製**
毫無疑問，這樣繁多的引用不可避免地會導致**之間耦合度的增加，使得更難以重構或者優化。在適當地模組劃分的基礎上，我們希望在跨模組引用時，能夠以絕對路徑的方式，譬如：

import react from


'react';


import from


'react-redux';


import from


'config/constants';


import mycomponent from


'components/mycomponent';


import from


'ducks/somereducer';


複製**
當然，我們並不提倡過度地使用絕對路徑引入，對於相對關係固定的元件，還是應該優先使用相對路徑方式引入。

如前文介紹，webpack 允許我們使用resolve.alias來自定義路徑解析：

module.resolve = 


};複製**
開發工具的支援是不可避免地因素，值得高興的是 vscode 允許我們在jsconfig.json中配置解析規則，auto-import 這樣的自動匯入工具同樣能識別這些規則：



},"exclude": ["node_modules", "dist"]


}複製**
eslint 同樣是前端開發不可或缺的部分，我們可以使用 eslint-import-resolver-webpack 來擴充套件 eslint-import 的模組解析，使用 npm 安裝該模組之後進行如下配置：

---


settings:


import/resolver:


webpack


# take all defaults


複製**
或者指定檔名：

---


settings:


import/resolver:


webpack:


config:


'webpack.dev.config.js'


config-index:


1# optional, take the config at index 1


複製**
對於未使用 webpack 的專案，則可以考慮使用 eslint-import-resolver-alias:

// .eslintrc.js


module.exports = 


}}};


複製**
"jest": 


複製**
typescript 的配置類似於 vscode，在 tsconfig.json 的 compileroptions 選項中新增如下配置：



}複製**

前端開發工具

sublime webstorm 具有關於js 的瀏覽器相容提示 chrome batarang angular的除錯外掛程式 git小烏龜 nodejs 壓縮和混淆工具 npm 自動安裝工具 grunt 合併和混淆工具 常用 bower 依賴管理工具 不建議使用 http server輕量級ser...

前端開發工具選擇

選擇後比較優秀的工具可以大大加快學習和工作效率 個人感覺最優的選擇是mac。在前端工程化的現在。命令列應該成為每乙個前端er的必備技能之一。macos自帶的shell工具足夠優秀。當然現在win10也內嵌了linux的子系統。也可以比較好的使用命令列。最關鍵的選擇是避免選擇恐懼症。cmd r 瀏覽器...

前端開發工具推薦

外掛程式 docblockr 生成特定格式的函式注釋。只要在函式上面一行輸入 按tab就ok了。git和gitgutter 專案管理用。markdown preview 針對markdown檔案 converttoutf8 支援除utf8外多種編碼 emmet zen coding！package ...