别名对打印脚本不起作用？

我试图缩短我的打印输入

从 import {Hello} from "./components/Hello";

到 import {Hello} from "Hello";

为此，我发现你可以在 webpack 中使用 resolve.alias，因此我配置了以下部分

resolve: {
root: path.resolve(__dirname),
alias: {
Hello: "src/components/Hello"
},
extensions: ["", ".ts", ".tsx", ".js"]
},

构建 Webpack，并且输出 bundle.js 可以工作

所以我的问题是 webpack 的 Resolve.alias 是否适用于类型脚本？

我发现跟踪 问题但是没有答案。

68821 次浏览
小开
最佳答案

如果您使用的是 ts-loader，那么您可能需要将您的 webpack alias/resolve设置与您的 tsconfig.json中的 paths设置同步。

{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"Hello": ["src/components/Hello"]
}
}
}

如果您正在使用 awesome-typescript-loader，那么 webpack 可以从 tsconfig.json中的 paths设置中自动计算出这个值，如 回购协议对这个问题的处理情况所示。这样，您就不需要在 Webpack alias字段中复制相同的信息。

小开

你可以这样做，让它按照你所描述的方式工作:

resolve: {
root: [
path.resolve(__dirname),
<path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components')
],
extensions: ["", ".ts", ".tsx", ".js"]
},

然后你可以做 import {Hello} from "Hello";

我知道这样做是为了解析 src/js目录中的文件路径。虽然我没有使用打字稿，但我不认为它会影响结果。

小开

你在 tsconfig.json中漏掉了一个非常重要的观点: 匹配的图案！

它的配置应该是这样的:

"baseUrl": ".",
"paths": {
"appSrc/*": [
"src/*"
]
}

“ *”是告诉 TS 匹配右边任何内容的重要部分。

我是从这篇文章中发现的: 类型安全的 es2015模块导入路径别名与 Webpack，类型脚本和 Jest

注意

  • 确保所有的 webpack.config.js都已更新(例如: 故事书)。
  • 如果使用 VisualStudio 代码，则可能需要重新启动它, 为了让这些弯弯曲曲的线条消失。
小开

我不得不对 Caio Saldanha 的解决方案做出一些小小的调整，以使其适用于我所处的环境。

我使用带 babel-plugin-module-resolver的 Babel 7来解析别名。没有 ts-loader或 awesome-typescript-loader，因为 Babel 7使用 @babel/preset-typescript支持 TypeScript 开箱即用。我必须为每个别名添加额外的路径配置，以自动加载模块根(例如 index.ts) :

"baseUrl": ".",
"paths": {  // this must be synchronized with .babelrc.js's module-resolver alias config
"component": ["src/component/index.ts"],
"component/*": ["src/component/*"],
...
}

在 /component文件夹中有一个 index.ts，其内容如下:

export { default as Logo } from './Logo';

如果没有额外的 .../index.ts生产线，这种进口对我来说不起作用:

import { Logo } from 'component';

.babelrc.js中的别名配置:

plugins: [
[
'module-resolver',
{
extensions: ['.js', '.jsx', '.ts', '.tsx'],
root: ['./src'],
alias: {
// this must be synchronized with tsconfig.json's path configuration
component: './src/component',
},
},
],
小开

正如其他人提到的，您需要在 webpack.config.js 中提供一个 alias:

    resolve: {


extensions: [".ts", ".js"],
alias: {
forms: path.resolve(__dirname, "src/forms/")
}
},

这需要与 tsconfig.json文件同步(需要 baseUrl 和路径)。

"compilerOptions":  {
baseUrl: "./",
...
paths: {
"forms/*": ["src/forms/*"]
}
}

注意: 通配符模式是与解析别名配置匹配所必需的。

然后您可以使用您的别名导入任何库:

import { FormsModule } from "forms/my-forms/my-forms.module";
小开

如果还有人有这个问题，不要忘记把你的文件夹添加到 tsconfig.json 的“ include”选项中，如下所示:

{
"compilerOptions": {
"sourceMap": true,
"allowJs": true,
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
},
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"lib": [
"es2016",
"dom"
]
},
"outDir": "./built/",
"include": [
"./src/**/*",
"./tests/**/*"
]
}
小开

有两个案子

  1. 当你编写自定义 webpack 时，它可以使用打印脚本，但不能直接使用。解释一下，后台有两种编译方式。首先是 tsx-> js，tsconfig.json 扮演了这个角色，但是当您实际编译 js 代码时，webpack 就出现了。 因此，对于别名，解析应该同时放在 tsconfig 和 webpack 中，以便成功运行应用程序
  2. 当您使用 default (在 create response app 之后) : 您只需要在 tsconfig 中添加 "baseUrl": "./src"并查看代码的工作情况。
小开

还可以配置 tsconfig-paths-webpack-plugin，以避免在多个地方重复别名。它将从 tsconfig.json文件中提取别名并自动将它们添加到 webpack 中。


提交答案