search

fi3ework / blog

📝
860 stars 51 forks source link

_WIP #25

Closed fi3ework closed 6 years ago

fi3ework commented 6 years ago

让 monorepo 的使用更加丝滑

全局的 TypeScript 类型

TypeScript 跳转

在开发模式下，经常会用到 Go To Definition 这个功能，但是对于 package 下的 library，它们虽然是用 TS 写的，但是实际中项目引用的是 tsc -w 产生的 JS 文件，所以即使开了 declaration: true，也只能跳转到对应 TS 文件产生的 d.ts 上。 解决方法：使用 tsconfig 的 paths，

{
  "compilerOptions": {
    "paths": {
      "@monodemo/service": ["../../service/src/index"],
      "@monodemo/permission-detail": ["../../permission-detail/src/index"],
      "@monodemo/check": ["../../check-detail/src/index"]
    }
  }
}

将 package 名直接映射给对应包的 index.tsx 文件，这其中有两个点需要注意

  1. 要映射到 index.tsx 中，如果是深层文件的引入的话，还要再加 paths
  2. 由于 IDE 默认找的是并且只能找的 tsconfig.json 这个文件，并且目前没有办法指定 IDE 去找其他指定的文件，所以现在的 paths 这可能会影响到 webpack 的打包，可以再创建一个 tsconfig.dev.json 文件，区别就是 tsconfig.dev.json 没有对其他 package 的映射，然后在 webpack 的 ts-loader 中指定
{
  test: /\.(ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('ts-loader'),
  options: {
    configFile: paths.appTsConfig,
  },
},

image https://medium.com/@NiGhTTraX/how-to-set-up-a-typescript-monorepo-with-lerna-c6acda7d4559