我正在我的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
原文链接:https://www.f2er.com/react/301017.html使用别名
要将导入映射到正确的文件,您需要使用webpack配置中的config.resolve.alias字段.
您的方案中的位置如下所示:
const config = { resolve: { alias: { 'app': path.resolve(__dirname,'src/app/'),};