使用 Webpack 2 和 awesome-typescript-loader 的 baseUrl 和路径解析

Posted 2023-03-13

【中文标题】使用 Webpack 2 和 awesome-typescript-loader 的 baseUrl 和路径解析

【英文标题】：baseUrl and paths resolution using Webpack 2 and awesome-typescript-loader

【发布时间】：2017-04-26 04:44:08

【问题描述】：

我想设置我的项目，所以无论何时我都使用下面的行：

import  BlahBlahService  from '@blahblah/core/BlahBlahService';

它被解析为：

./dist/blahblah/core/BlahBlahService

我已经阅读了在线资源并应用了指示的设置（我也包括在下面）。这在 Visual Studio Code 中工作；即它没有向我显示错误，因此它能够正确读取我在 tsconfig 中的设置并理解它。我想让同样的事情发生在 Webpack 上。

但是我收到以下错误：

./xxxxxxxxxxx.ts 中的错误 找不到模块：错误：无法解析“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”中的“@blahblah/core/BlahBlahService”

我的网络应用程序中有以下设置：

Angular 2 版本 2.2.0 Typescript 2.0.8 版 Webpack 版本 2.1.0-beta.26 awesome-typescript-loader 版本 2.2.4

我的 tsconfig 中还有以下内容：

"compilerOptions": 

    ...

    "baseUrl": ".",
    "paths": 
       "@blahblah/core": ["./dist/blahblah/core"],
       "@blahblah/core/*": ["./dist/blahblah/core/*"],
    

    ...

 

我的 webpack.js 文件中有以下设置：

plugins: [

    ...

    new TsConfigPathsPlugin(),

    ...
],

【问题讨论】：

尝试将 typescript 版本升级到 2.1。根据github.com/Microsoft/TypeScript/wiki/…，它应该可以在没有插件的情况下工作。

【参考方案1】：

我有同样的问题。它应该可以工作，但事实并非如此。

我的解决方法是在 package.json 中添加“浏览器”属性，别名与 tsconfig 中相同。

package.json

   "name": "app",
   ...
   "browser": 
      "@blahblah/core": ["./dist/blahblah/core"],
      "@blahblah/core/*": ["./dist/blahblah/core/*"]
   ,
   "scripts":  ... ,
   ...

【讨论】：

我还没有尝试过，但我还是将赏金授予你，因为它即将到期。我会试试这个，如果它解决了我的问题，我会告诉你。谢谢。

那你让他知道了吗？

如果你将“路径”从 tsconfig 复制到 webpack 的 resolve.alias，它应该可以工作。它不是一个很好的解决方案，但是我相信它有一个插件'TsConfigPathsPlugin'。 github.com/s-panferov/awesome-typescript-loader/issues/311

【参考方案2】：

我目前正在使用 webpack@3.10 和 webpack-dev-server@2.9.7。 同样的问题。我找到了解决方案in a github issue。

tsconfig.js：

"compilerOptions": 

    ...

    "baseUrl": ".",
    "paths": 
        "~/*": ["./src"],
    

webpack.config.js：

var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

resolve: 
    alias: 
        "~/": "./src"
    ,
    plugins: [
        new TsConfigPathsPlugin()
    ]

【讨论】：

需要明确的是，alias 似乎不是必需的。问题是添加插件的行 new TsConfigPathsPlugin() 需要在 resolve 块下。不仅是主选项对象下的plugins，还有resolve.plugins。