如何使tsconfig与webpack一起工作提供插件

Question

我有一个简单的组件，它使用styled-components和包含主题颜色的utils.tsx文件。我通过WebpackProviderPlugin加载它，因为我不想在每个组件文件中都包含React和样式化的组件模块。它工作、渲染、编译都很好，但我在控制台和编辑器中有一些TS错误，因为typescript编译器/解析器无法识别webpack别名

TS2686:"React"指的是UMD全局，但当前文件是一个模块。请考虑添加导入。

TS2304:找不到名称"Styled"。

TS2304:找不到名称"Color"。

Navigation.tsx

const Nav = Styled.nav`
height: 64px;
background-color: ${Color.darkBlue};
`
function Navigation() {
return <Nav>dwa</Nav>
}
export default Navigation

webpack.config.js

...
new webpack.ProvidePlugin({
React: 'react',
Device: [
path.resolve(path.join(__dirname, 'src/utils/utils.tsx')),
'devices',
],
Color: [
path.resolve(path.join(__dirname, 'src/utils/utils.tsx')),
'colors',
],
Styled: ['styled-components', 'default'],
}),
...

tsconfig.json

{
"compilerOptions": {
"module": "none",
"moduleResolution": "node",
"jsx": "react",
"target": "es6",
"lib": ["es2015", "dom", "dom.iterable"],
"sourceMap": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"plugins": [{"name": "typescript-tslint-plugin"}],
"baseUrl": "./",
"paths": {
"components/*": ["src/components/*"],
"utils/*": ["src/utils/*"]
}
},
"include": ["src/**/*.tsx"],
"exclude": ["node_modues"]
}

Answer 1

其中一种方法是进入tsconfig.json并设置：

"allowUmdGlobalAccess": true