【问题标题】：Typescript + Webpack + node_modules resolutionTypescript + Webpack + node_modules 解析
【发布时间】：2018-02-17 23:04:25
【问题描述】：

我正在处理一个项目 - 用 Typescript (2.4) 编写，与 Webpack (3.5) 捆绑在一起，以及一些节点依赖项。它有一个客户端和服务器部分，每个部分都在它自己的子文件夹中。我很快意识到这些共享大量代码，并添加了另一个顶级“共享”文件夹 - 在 tsconfig.json 文件中，我添加了：

...
"include": [
    "*.ts",
    "../shared/*.ts",
]
...

所有这些工作都很好 - 但很快这些共享文件开始拥有自己的依赖项。我认为由于共享文件并不是真正建立在自己的 - 依赖项的所有权将属于服务器和客户端目录。像这样的：

project
| server
|  | node_modules
|  |  |  @types
|  |  |  |  some-npm-library
|  |  |  some-npm-library
|  | main.ts
|  | SomeServerClass.ts   (inherits ../shared/BaseClass)
|  | tsconfig.json
|  | webpack.config.js
| client
|  | node_modules
|  |  |  @types
|  |  |  |  some-npm-library
|  |  |  some-npm-library
|  | main.ts
|  | SomeClientClass.ts   (inherits ../shared/BaseClass)
|  | tsconfig.json
|  | webpack.config.js
| shared
|  | BaseClass.ts    (Has an dependency on some npm thing)
|  | otherstuff.ts

当我运行tsc - 它编译没有错误。但是 webpack 似乎永远找不到 node_modules 依赖项，Error: Can't resolve 'some-npm-library'。

客户端tsconfig.json：

{
    "compilerOptions": {
        "target": "es2017",
        "module": "commonjs",
        "baseUrl": "./",
        "sourceMap": true,
        "outDir": "./build",
        "typeRoots": ["./node_modules/@types"],
        "types": ["some-npm-library"],
        "lib": [ "es6", "dom", "es2017.object", "es2016.array.include" ]
    },
    "include": [
        "*.ts",
        "..shared/**.ts"
    ]
}

客户端 webpack.config.js

const path = require('path');

module.exports = {
    entry: "./main.ts",
    target: "web",
    output: {
        filename: "app.js",
        path: __dirname + "/bin"
    },
    watch: true,

    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".js", ".json"],                  
    },

    module: {
        rules: [
            { test: /\.ts$/, loader: "ts-loader" },    
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

【问题讨论】：

标签： typescript webpack dependencies node-modules resolve

【解决方案1】：

什么对我有用：

我想出了一个解决方案——它可能不适用于处于类似情况的其他人——但我使用了 Webpack 的 Resolve.alias。通过像这样添加一行：

alias: {
   'npm-library': path.resolve(__dirname, 'node_modules/npm-library/')
}

这将使 webpack 查看 import * from 'npm-library' 并识别它 - 尽管该共享文件夹中没有 npm 库。

也可以试试：

我还尝试将依赖项安装到共享文件夹中——而不是单独安装客户端和服务器——问题是我会有重复的依赖项。但小心避免这种情况也可能奏效。

【讨论】：

【解决方案2】：

使用这个带有正确文件路径的 webpack.config.ts 文件：

var fs = require('fs');
var path = require('path');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function (x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  entry: './app/server.ts',
  mode: 'development',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'server.js',
  },
  resolve: {
    // Add '.ts' and '.tsx' as a resolvable extension.
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
  },

  module: {
    // loaders: [
    rules: [
      // All files with a '.ts' or '.tsx'
      // extension will be handled by 'ts-loader'
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ],
  },
  target: 'node',
  externals: nodeModules,
};

【讨论】：