在实际开发过程中, 经常会用到 webpack 的别名, 来缩短我们在项目中的各种相对路径的引入, 方便开发也方便阅读.
但是 vscode 在不做配置的情况下, 本身并不能识别别名, 故无法自动跳转, 一定程度上降低了使用的便捷性. 要解决也很简单, 在项目根目录下建立 jsconfig.JSON, 配置 baseUrl 和 path 即可, 但是也还是会有一些问题其他的细节问题, 配置起来也比较机械化, 在需要配置多个 alias 时, 会显得有些重复化.
作为一个技术打工人, 当然是不允许重复化, 机械化的操作产生, 一切能够通过工具解决的事情绝不手动解决. 打工人, 不在重复中爆发, 就在机械化操作中衰落.
image.PNG
alias-jsconfig-webpack-plugin, 通过在 webpack 中增加插件, 根据 alias 自动生成 jsconfig.JSON(也可以选择 tsconfig.JSON). 用法也非常简单, 跟常规的 webpack 插件一样:
- // install
- // NPM i --save-dev alias-jsconfig-webpack-plugin
- const Alias = require('alias-jsconfig-webpack-plugin');
- // ...plugins
- export default {
- // your other config
- // ...
- plugins: [
- // your other plugins
- new Alias({
- language: 'js', // or 'ts'
- jsx: true, // default to true,
- indentation: 4, // default to 4, the indentation of jsconfig.JSON file
- }),
- ]
- }
源代码也非常简单, 不过 80 行, 核心思路就是读取 webpack 配置中的 alias, 判断 jsconfig.JSON 文件, 如果不存在则按照默认配置新建并将 alias 注入, 存在则对比替换并新增 path 配置. 从而完成 jsconfig.JSON 根据 alias 自动配置. 代码在这里.
最后, 欢迎试用, 欢迎 issues.
NPM 包链接: https://www.npmjs.com/package/alias-jsconfig-webpack-plugin
来源: http://www.jianshu.com/p/ca44b05468c4