Question

这个词有三种不同的含义＆＃34;模块＆＃34;在这个问题中，如果不清楚，请询问澄清。

我有一个TypeScript项目，它对node_module有很大的依赖性，我现在想要对其进行更改。我已将此依赖关系的源克隆到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理解模块名称＆＃34;依赖＆＃34;。

我怀疑问题是我的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

1 个答案: