我将react-create-app作为我项目的样板。
然后我决定使用打字稿,所以我希望能够同时编写TS和JS文件。
我移动了所有必要的文件(tsconfig,config-overrides等),所以我的项目已经构建并运行良好,但只有一个问题:每当我在routes.js文件中尝试/static/media/Component.4c25ef27.tsx
时,组件变量看起来像这个var paths = require('react-scripts-ts/config/paths')
module.exports = function override(config) {
config.module.rules.push({
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
});
config.module.rules.push({
test: /\.(ts|tsx)$/,
include: paths.appSrc,
loader: ['ts-loader'],
});
return config
}
,我的应用程序失败了,因为我将变量作为路径组件传递。
我做错了什么?
配置-overrides.js
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
tsconfig.json
{
"name": "src",
"version": "0.1.0",
"private": true,
"dependencies": {
"jss": "^6.5.0",
"jss-camel-case": "^3.0.0",
"jss-nested": "^3.0.1",
"jss-px": "^1.0.0",
"jss-vendor-prefixer": "^4.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"react-scripts-ts": "^2.12.0",
"react-virtualized": "^9.16.1",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-act": "^1.5.1",
"redux-form": "^7.2.0",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
},
"devDependencies": {
"@types/react": "^16.0.34",
"babel-eslint": "^8.1.2",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"react-app-rewired": "^1.4.0"
}
}
的package.json
{{1}}