假设项目使用了webpack,且配置了一些路径别名,如果我们在项目中引用文件时使用webpack配置里配的路径别名,对提高编译速度是会有一定的加成的,效果虽然没实测过,但是肯定不会效果拔群,属于如果方便的话能用就用吧,不方便的话就算了,没必要为了方便使用这个功能特意去换编辑器/IDE。
目录
一、案例
回到正题,假设你的webpack别名配置如下:
const resolve = (tempPath) => path.join(paths.appSrc, '../', tempPath) if (path.relative(paths.appPath, baseUrlResolved) === '') { return { src: paths.appSrc, '@': resolve('src'), '@api': resolve('src/api'), '@assets': resolve('src/assets'), '@img': resolve('src/assets/img'), '@css': resolve('src/assets/css'), '@component': resolve('src/components'), '@constants': resolve('src/constants'), '@containers': resolve('src/containers'), '@models': resolve('src/models'), '@routes': resolve('src/routes'), '@tests': resolve('src/tests'), '@utils': resolve('src/utils'), }; }
二、IDEA方案
如果你和我一样,主用的是IDEA,可以直接打开IDEA配置,在搜索栏搜”webpack”,然后就会看到一个可以选择webpack配置文件的地方,点击选中webpack配置文件后保存后,IDEA就能自动识别别名路径了。因为太过简单所以不贴图了。
webstorm我没装,不过既然是同一个公司出的,大概率也会支持。
三、vscode方案
但是我们的团队成员大部分是用vscode的,所以要按下面的方式处理(只需要修改代码配置,不用每个开发同学都去设置vscode的配置项,所以比较好推行)。
先打开项目根目录,新建jsconfig.json文件,填入如下内容(根据你的webpack实际配置的别名来修改):
{ "compilerOptions": { "jsx": "react", "target": "ES6", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "@/*": [ "src/*" ], "@api/*": [ "src/api/*" ], "@assets/*": [ "src/assets/*" ], "@img/*": [ "src/assets/img/*" ], "@css/*": [ "src/assets/css/*" ], "@component/*": [ "src/components/*" ], "@constants/*": [ "src/constants/*" ], "@containers/*": [ "src/containers/*" ], "@models/*": [ "src/models/*" ], "@routes/*": [ "src/routes/*" ], "@tests/*": [ "src/tests/*" ], "@utils/*": [ "src/utils/*" ] } } }
这样就ok了。需要注意的时,当用vscode打开一个目录时,这个文件需要在打开目录的顶层才有效。如果你的代码仓库含有多个子项目,你在子项目A的根目录下配置了jsconfig.json文件的话,用vscode直接打开总项目是没用的,需要用vscode直接打开子项目A对应的目录方能生效。