如何让 Webpack 和 Typescript 使用外部 node_module 文件夹？

Posted 2023-03-13

【中文标题】如何让 Webpack 和 Typescript 使用外部 node_module 文件夹？

【英文标题】：How do I get Webpack and Typescript to use an external node_module folder?

【发布时间】：2019-03-23 16:58:07

【问题描述】：

设置

我将bluebird 模块和@types/bluebird 安装在node_modules 文件夹中。

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

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

问题

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

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

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

import * as Promise from 'bluebird'

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

但是，使用外部 node_modules 文件夹，我无法让它工作。

我尝试过的方法

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

1.在tsconfig.ts中设置baseURL和paths

对我来说最明显的解决方案似乎是设置 baseURL 并将 paths 设置为 tsconfig.json 中的 node_modules 就像这样（shared 包含 node_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 文件夹中指定相对路径，但最终遇到了大致相同的问题。

【参考方案1】：

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

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

为了实现这一点，我在tsconfig.json 中使用paths 将导入指向类型定义，并在webpack.config.js 中使用resolve.alias 将相同的导入指向实际模块。

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 都很高兴。