4

设置

我将bluebird模块连同@types/bluebird安装在一个node_modules文件夹中。

我还有一些.ts文件将使用 Webpack 捆绑并在浏览器中使用。

由于各种原因，该node_modules文件夹位于我的.ts文件的路径层次结构之外。

问题

我想bluebird在我的文件中导入模块，.ts这样：

  1. 我得到打字。
  2. Webpack 将解析模块并将其包含在输出包中。

如果node_modules在路径层次结构中的正确位置，我可以简单地这样做：

import * as Promise from 'bluebird'

Typescript 编译器（通过ts-loader）解析为类型定义 node_modules/@types/bluebird并类型检查代码，Webpack 解析为实际的模块node_modules/bluebird并在包中发出它。

但是，使用外部node_modules文件夹，我无法使其正常工作。

我尝试过的方法

到目前为止，我能够得到它，以便 Typescript 很高兴，但 Webpack 却没有。

1.设置baseURL和paths输入tsconfig.ts

对我来说最明显的解决方案似乎是像这样设置并baseURL设置 a （包含文件夹）：pathsnode_modulestsconfig.jsonsharednode_modules

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

但是我无法做到：

import * as Promise from 'shared/node_modules/bluebird'

我需要：

import * as Promise from 'shared/node_modules/@types/bluebird/index'

但是这个导入不适用于 Webpack。它要么找不到它，要么如果我配置它来找到它，ts-loader 不会喜欢编译它（因为它是一个声明文件），或者如果我配置它忽略它，它会在运行时崩溃，因为它不在那里。

2.相对导入

我尝试在node_modules文件夹中指定相对路径，但最终遇到了大致相同的问题。

4

1 回答 1

2

我对这个问题采用了一个有点老套的解决方案。

我遇到的问题的症结在于我需要一个import语句来通过 Typescript 和 Webpack 以不同的方式解决。Typescript 需要将其解析为类型定义，Webpack 需要将其解析为模块。

为了实现这一点，我将导入指向类型定义，并将相同paths的导入指向实际模块。tsconfig.jsonresolve.aliaswebpack.config.js

tsconfig.json:

{
    "compilerOptions": {
        "baseUrl":"..",    // you need this to set paths below.
        "paths":{
             "shared/bluebird":["shared/node_modules/@types/bluebird/index"]
        }
        ...
    }
}

webpack.config.js

resolve: {
    alias: {
        "shared/bluebird": path.resolve(__dirname, '../shared/node_modules/bluebird')
    }
    ...
}

这允许我这样做：

import * as Promise from 'shared/bluebird'

Typescript 和 Webpack 都很高兴。

于 2018-10-18T21:55:21.143 回答