Babel-plugin-resolve-config-json NPM

babel-plugin-resolve-config-json

根据 jsconfig.json/tsonfig.json 的路径映射自动转换路径，省去手动编写 webpack 的 resolve.alias 配置

使用方法

这是一个 babel 插件

npm i -D babel-plugin-resolve-config-json

// babel配置
// 最好放在babel插件的第一位执行，也就是plugin数组的最后一位（babel plugin执行是逆序的）
const babelOptions = {
  presets: [],
  plugins: [
    [
      require.resolve("babel-plugin-resolve-config-json"),
      {
        isTypescript: true, // true时读取tsconfig.json，false时读取jsconfig.json。默认是false
        modules: [path.resolve(__dirname, `${projectRootPath}`)] // 接收一个路径数组，会读取路径根目录下的config.json进行配置。一般情况下，单项目直接 就是项目根路径就行。如果引用另一个项目的代码，则需要额外指定那个目录
      }
    ]
  ]
};

为什么需要

通过这篇文章可以知道，在 webpack 项目中，为了避免手写../../../../的引用方法，我们可以像文章的配置那样，配置我们的jsconfig.json的compilerOptions.paths让vscode去实现自动代码简单路径检索；除此之外，我们还需要配置webpack的resolve.alias告诉webpack如何找到打包文件

如：

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "Config/*": ["src/config/*"],
      "Components/*": ["src/components/*"],
      "Ducks/*": ["src/ducks/*"],
      "Shared/*": ["src/shared/*"],
      "App/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

// webpack
module.resolve = {
  alias: {
    Config: path.resolve(__dirname, "..", "src", "config"),
    Components: path.resolve(__dirname, "..", "src", "components"),
    Ducks: path.resolve(__dirname, "..", "src", "ducks"),
    Shared: path.resolve(__dirname, "..", "src", "shared"),
    App: path.join(__dirname, "..", "src")
  }
};

通过babel-plugin-resolve-config-json。你只需要配置第一步，无需webpack再写一份配置就可以了！

原理上和babel-plugin-module-resolver差不多。babel-plugin-resolve-config-json的作用是为了直接通过编辑器json配置，省去配置webpack的部分

（其实这个插件为了解决最蛋疼问题是。是当前项目会引用另一个项目的代码，另一个项目又配了路径映射，这个时候额外配置modules字段指向另一个项目就可以完美解决）