如何在Create-React-App中使用本地TypeScript依赖模块的装饰器

问题根因 #

Create React App（CRA）默认的Webpack配置仅会转译项目src目录下的TypeScript/JavaScript文件，你引入的本地依赖my-project处于src目录外，CRA的ts-loader/babel-loader没有处理该路径下的文件，因此无法识别装饰器语法@。

解决方案 #

方案1：预编译本地依赖（最推荐）

这是最符合npm包规范的解法，不需要修改CRA配置：

• 进入你本地的my-project项目根目录，修改其tsconfig.json开启编译输出：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

• 在my-project的package.json中指定入口和类型声明路径：

{
  "main": "./dist/foo_module.js",
  "types": "./dist/foo_module.d.ts"
}

• 每次修改my-project后执行tsc编译，React项目导入时会直接读取编译后的JS产物，不会触发语法报错。

方案2：修改CRA配置适配外部TS文件

如果需要直接调试my-project的源码，不想每次修改都手动编译，可以通过react-app-rewired修改CRA的Webpack配置，不需要执行eject：

1. 安装依赖：

npm install react-app-rewired customize-cra @babel/plugin-proposal-decorators -D

2. 修改React项目根目录的package.json中的scripts字段，把react-scripts替换为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

3. 在React项目根目录新建config-overrides.js，加入如下配置：

const { override, addExternalBabelPlugin, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  // 把本地依赖项目路径加入babel处理范围
  babelInclude([
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, '../../Path/To/My/Project')
  ]),
  // 新增装饰器语法支持
  addExternalBabelPlugin(['@babel/plugin-proposal-decorators', { legacy: true }])
);

4. 重启项目即可正常导入外部带装饰器的TS文件。

方案3：临时软链到src目录（仅适用于本地调试）

如果只是临时调试，也可以把本地依赖项目软链到React项目的src目录下，让CRA默认的loader处理该目录的文件：

# 在React项目根目录执行
ln -s ../../Path/To/My/Project ./src/my-project

导入时修改路径为import * as mylib from './my-project/foo_module'即可。

内容的提问来源于stack exchange，提问作者jayatubi