如何在带有Create React App的依赖本地typescript的节点模块中使用decorator

Question

我有一个基于typescript的React项目，它依赖于另一个基于type script的本地项目。我有这样的配置。

React项目的tsconfig.json：

"compilerOptions": {
"target": "esnext",
...
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},

package.json:

"dependencies": {
...
"my-project": "file:../../Path/To/My/Project",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},

如果我在React项目的jsx文件中使用decorator，那就好了：

import React from 'react';
import './App.css';
function deco(target:any){}
@deco                   // < This would be fine
class test{}
function App() {
return (
<div className="App">
<header className="App-header">
</header>
</div>
);
}
export default App;

然而，如果我使用decorator从外部项目导入一个类，那么在构建时就会失败：

import React from 'react';
import './App.css';
// This would case a error when build
import * as mylib from 'my-project/foo_module' 
function App() {
return (
<div className="App">
<header className="App-header">
</header>
</div>
);
}
export default App;

/Path/To/My/Project/foo_module.ts 3:0
Module parse failed: Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders      
| import {deco} from 'deco';
|
> @deco()
| export class foo_class

这似乎是关于webpack的一个问题，但我不知道如何在Create React App中处理这个问题。

Answer 1

听起来您的包正在直接导出未编译的typescript。通常，编译器不会编译依赖项的输出，因为它预计依赖项目已经编译了。在My/Project中，package.json的main条目将指向已编译的js，而不是未编译的ts:

{
"name": "my-library",
"version": "1.0.0",
"main": "dist/index.js",
"scripts": {
"build": "rm -rf dist && tsc"
},
"devDependencies": {
"typescript": "^4.3.2"
}
}