使用 Webpack 从子文件夹构建和引用 TypeScript 模块

Question

这道题"module"这个词大概有3种不同的意思，不明白的地方还请大家指正。

我有一个严重依赖 node_module 的 TypeScript 项目，我现在想对其进行更改。我已将此依赖项的源代码克隆到 Git 子模块中。此依赖项也是使用 TypeScript 构建的。

我的目录结构如下：

root/
  - source/
    - app.tsx (my entrypoint)
    - ... 
  - vendor/
    - dependency/ (git submodule)
      - node_modules/
        - (dependency's dependencies)
      - source/
        - index.ts
        - ... 
      - package.json
      - tsconfig.json
  - webpack.config.js
  - tsconfig.json
  - package.json

文件 root/source/vendor/dependency/source/index.ts 包含依赖项的导出。

我想配置我的项目，以便

我可以在我的 .ts 文件中引用我的依赖项，就好像它仍然是 node_module 依赖项一样（即 import { class1, class2 } from "dependency".
让 webpack 将我的依赖构建到与我的项目相同的包中

我在第 1 点遇到了很大的困难。我不知道如何让 tsc 理解模块名称 "dependency"。

我怀疑问题是我的 tsconfig.json 中缺少配置设置 - 但我无法弄清楚。我已经尝试将 baseUrl 和 paths 设置为我认为应该工作的值，但编译器仍然抱怨找不到模块。

我现在的tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "isolatedModules": false,
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "noImplicitAny": false,
        "sourceMap": true,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": false,
        "suppressImplicitAnyIndexErrors": true,
        "outDir": "./lib",
        "types": [
            "es6-promise",
            "google.analytics"
        ],
        "baseUrl": ".",
        "paths": {
            "dependency": "vendor/dependency/source/index.ts"
        }
    },
    "exclude": [
        "**/node_modules",
        "vendor/dependency/node_modules/"
    ]
}

我现在的webpack.config.js

var path = require("path");
var tsConfigPath = path.resolve("tsconfig.json");

module.exports = {
  devtool: "source-map",
  entry: {    
    web: path.resolve(path.join("source", "app.tsx"))
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".scss"],
    modules: [
      "node_modules",
      "vendor"
    ]
  },
  output: {
    path: path.resolve(path.join("proxy", "static")),
    filename: "[name]/[name].js",
    publicPath: "/"
  },
  module: {
    rules: [
        {
          test: /\.tsx?$/,
          loader: "awesome-typescript-loader"
        },
        {
          test: /\.scss$/,
          loaders: ["style-loader", "css-loader", "sass-loader"]
        },
        { // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
          enforce: "pre",
          test: /\.js$/,
          loader: "source-map-loader"
        }
    ]
  },
  plugins: [
    require("webpack-fail-plugin")
  ],
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
};

如果我做错了，请告诉我...我想做的就是在本地修改我的依赖项，而不必将其发布到 npm。

Answer 1

这有点棘手，但您可以在项目根目录中创建 node_modules 文件夹（如果该文件夹尚不存在）。在其中创建一个文件 dependency.ts，您可以在其中执行以下操作：

export * from './../vendor/dependency/source/index.ts'

在那之后当你写 import { class1, class2 } from 'dependency' 从您应用程序的任何位置，它会查找 root/node_modules/dependency.ts.

阅读官方 TypeScrypt 文档中的 article 了解详细信息。

使用 Webpack 从子文件夹构建和引用 TypeScript 模块

Build and reference a TypeScript module from a subfolder using Webpack

typescript

tsconfig

webpack