如何在 React 应用程序的 typescript 文件中导入 js 模块（使用绝对路径）？
Posted
技术标签:
【中文标题】如何在 React 应用程序的 typescript 文件中导入 js 模块（使用绝对路径）？【英文标题】：How to import js modules (with absolute path) in my typescript file in React application? 【发布时间】：2019-03-31 05:51:16 【问题描述】：我正在将 typescript 集成到我的 React 应用程序中，该应用程序具有大量代码。我有一些应用程序级别的 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);
但是现在我在我的应用程序中添加了打字稿，每当我导入时
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, '../src'),
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?$/,
loader: 'happypack/loader?id=jsx-without-proptypes',
include: [
path.resolve(__dirname),
path.resolve(__dirname, '../src'),
],
,
test: /\.jsx?$/,
loader: 'happypack/loader?id=jsx-without-lodash-plugin',
include: [
path.resolve(__dirname, '../src/app/modules/insights/'),
],
exclude: /node_modules/,
,
test: /\.jsx?$/,
loader: 'happypack/loader?id=jsx-with-proptypes',
,
test: /\.jsx?$/,
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',
query:
name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]', // ?[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,
replacement: (match, p1) =>
const replacedStr = p1;
return `'$replacedStr'`;
,
,
//doing what i18nPlugin would do for html files - with the *double* quotes
pattern: /__\(\s*"(.+?)"\s*\)/g,
replacement: (match, 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', path.resolve(PWD, '../../node_modules'), path.resolve(PWD, './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 上定义的别名也不能解决问题。
【问题讨论】：
在您的tsconfig.json 中有"allowJs": true 吗？
另外，如果您要导入本地模块，则需要通过在路径中使用 ./ 来指定它，例如import HOC1 from './app/hocs/hoc1'
我的 tsconfig 中有 "allowJs": true
还有没有什么办法可以相对导入所有内容，因为导入 100 个文件会比较混乱
那是我在这里打字的时候。我的代码中没有输入错误。
【参考方案1】：
我不是 100% 确定我做得对，但我还在 tsconfig 中指定了 paths 键，如下所示：
"baseUrl": "./src",
"paths":
"@common/*": ["./common/*"],
"@moduleA/*": ["./moduleA/*"],
"@moduleB/*": ["./moduleB/*"],
而且它似乎工作正常。 @ 前缀只是我用来区分我的模块和 npm 依赖项的东西
【讨论】：
【参考方案2】：https://webpack.js.org/configuration/resolve/#resolve-alias
使用别名
要将导入映射到正确的文件，您需要在 webpack 配置中使用 config.resolve.alias 字段。
场景中的位置如下所示：
const config =
resolve:
alias:
'app': path.resolve(__dirname, 'src/app/'),
,
,
;
【讨论】：
@AjayGaur，它不编译？一直报同样的错误？还是 IDE 在抱怨？ @AjayGaur 正如您在src 上定义的context。如果config.resolve.alias 映射'app': '../src/app' 有效，您可以试试吗？
好像我的tsconfig有问题以上是关于如何在 React 应用程序的 typescript 文件中导入 js 模块（使用绝对路径）？的主要内容，如果未能解决你的问题，请参考以下文章
Typescript React/Redux：“typeof MyClass”类型的参数不可分配给“ComponentType<...”类型的参数