我正在我的React app中集成typescript,它有大量的代码.我有一些应用程序级别的HOC,我将其应用于React组件：
import React from 'react';
import HOC1 from 'app/hocs/hoc1';
import compose from 'recompose/compose;
class MyComponent from React.Component {
...component stuff...
}
export default compose(HOC1())(MyComponent);
但是现在我在我的应用程序中添加了typescript,每当我导入时
import HOC1 from 'app/hocs/hoc1';
它说
TS2307: Cannot find module 'app/hocs/hoc1'.
我不想为所有HOC添加类型定义.什么是解决方案以及为什么我收到此错误？
[编辑]我也在tsconfig中使用baseUrl.我的文件夹结构是
/Project/configs/tsconfig /Project/src/app/hocs
在tsconfig中,我通过this文档将baseUrl作为../src.
另一个编辑
我的webpack配置看起来像：
{
test: /\.(t|j)sx?$/,loader: 'happypack/loader?id=jsx-without-proptypes',include: [
path.resolve(__dirname),path.resolve(__dirname,'../src'),],},
整个webpack配置看起来像
const config = {
context: path.resolve(__dirname,mode: NODE_ENV,optimization: {
splitChunks: false,nodeEnv: NODE_ENV,minimize: false,node: {
net: 'empty',output: {
path: path.resolve(__dirname,'../build/public/assets'),publicPath: '/assets/',sourcePrefix: ' ',pathinfo: DEBUG,//https://webpack.js.org/configuration/output/#output-pathinfo
},module: {
noParse: [/html2canvas/],rules: [
{
test: /\.tsx?$/,enforce: 'pre',use: { loader: 'awesome-typescript-loader' },...shimLoaders,...selectiveModulesLoader,{
test: /\.(t|j)sx?$/,{
test: /\.jsx?$/,loader: 'happypack/loader?id=jsx-without-lodash-plugin',include: [
path.resolve(__dirname,'../src/app/modules/insights/'),exclude: /node_modules/,loader: 'happypack/loader?id=jsx-with-proptypes',loader: 'babel-loader',query: {
presets: [['env',{ include: ['babel-plugin-transform-es2015-template-literals'] }]],{
test: /\.css$/,use: getCssLoaders({
pwd: PWD,debug: DEBUG,}),...getScssRules(DEBUG,PWD),{
test: /\.less$/,use: [DEBUG ? 'css-loader' : 'css-loader?minimize','less-loader'],{
test: /\.txt$/,loader: 'raw-loader',{
test: /\.svg$/,loader: 'spr-svg-loader',{
test: /\.(png|jpg|jpeg|gif)$/,loader: 'url-loader',query: {
name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]',// ?[hash]
limit: 10000,{
test: /\.(woff|woff2)$/,loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/font-woff',{
test: /\.(otf|ttf)$/,loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/octet-stream',{
test: /\.eot$/,loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/vnd.ms-fontobject',{
test: /\.(wav|mp3)$/,loader: 'file-loader',// ?[hash]
},{
test: /\.pug/,loader: 'pug-loader',{
test: /\.html$/,include: /src\/app/,loader: StringReplacePlugin.replace({
replacements: [
{
//Replaces ES6 strings from languagePack to simple string
pattern: /__\(\s*`([^`]*)`\s*\)/gi,replacement: (match,p1) => {
let replacedStr = p1;
replacedStr = replacedStr.replace(new RegExp('\\$\\{([\\w\\.\\:\\-]+)\\}','g'),'\' + $1 + \'');
return `'${replacedStr}'`;
},{
//Following methods - look out carefully for the *quotes* (single/double)
//doing what i18nPlugin would do for html files - with the *single* quotes
pattern: /__\(\s*'(.+?)'\s*\)/g,p1) => {
const replacedStr = p1;
return `'${replacedStr}'`;
},{
//doing what i18nPlugin would do for html files - with the *double* quotes
pattern: /__\(\s*"(.+?)"\s*\)/g,p1) => {
const replacedStr = p1;
return `"${replacedStr}"`;
},resolve: {
modules: [
path.resolve(PWD),path.resolve(PWD,'..'),'node_modules','web_modules','src',extensions: ['.js','.jsx','.ts','.tsx','.json','.webpack.js','.web.js'],alias: ALIAS,// symlinks: false,//https://webpack.js.org/configuration/resolve/#resolve-symlinks,https://github.com/webpack/webpack/issues/1643
},plugins: [getProvidePlugin(),getLoaderOptionPlugin({ debug: DEBUG }),...getHappypackPlugin({ debug: DEBUG })],resolveLoader: {
modules: ['node_modules','../../node_modules'),'./config/loaders/')],alias: {
text: 'raw-loader',// treat text plugin as raw-loader
jst: 'ejs-loader',style: 'style-loader',imports: 'imports-loader',bail: !DEBUG,watch: DEBUG,cache: DEBUG,stats: DEBUG ?
{
colors: true,reasons: false,hash: VERBOSE,version: VERBOSE,timings: true,chunks: false,chunkModules: VERBOSE,cached: VERBOSE,cachedAssets: VERBOSE,performance: true,} :
{ all: false,assets: true,warnings: true,errors: true,errorDetails: false },};
另一个编辑
webpack config定义的别名也没有做到.
https://webpack.js.org/configuration/resolve/#resolve-alias
使用别名
要将导入映射到正确的文件,您需要使用webpack配置中的config.resolve.alias字段.
您的方案中的位置如下所示：
const config = {
resolve: {
alias: {
'app': path.resolve(__dirname,'src/app/'),};
