Typescript + Webpack + node_modules解析

Question

我有一个我正在研究的项目 - 用Typescript（2.4）编写，与Webpack（3.5）捆绑在一起，以及一些节点依赖。它有一个Client和Server部分，每个部分都在它自己的子文件夹中。我很快意识到这些代码共享了很多代码，并添加了另一个顶级“共享”文件夹 - 在两个tsconfig.json文件中，我添加了：

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

所有这些都很有效 - 但很快这些共享文件开始具有自己的依赖性。我认为，由于共享文件并非真正构建在自己身上 - 依赖项的所有权属于Server和Client目录。像这样的东西：

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似乎没有找到与Error: Can't resolve 'some-npm-library'相关的node_modules依赖项。

Client 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"
    ]
}

Client 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" }
        ]
    }
};

Answer 1

What worked for me:

我找到了一个解决方案 - 它可能对类似情况下的其他人不起作用 - 但我使用了Webpack的Resolve.alias。通过添加如下所示的行：

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

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

Also maybe try:

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

Answer 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,
};