使用 webpack 配置 Typescript 項目

Question

您好，我想使用復合配置和 webpack 配置 Typescript（使用單個tsconfig.json時代碼運行良好）。 我准確地說我是 TypeScript 新手並且在 javascript 中生銹了。 我很難獲得我的輸出 json 文件。

編輯：我添加了更多配置並更改了目錄結構以獲得更好的東西，我相信

我的項目結構：

    tsconfig.base.json
    tsconfig.json
    tsconfig.base.json
    webpack.config.json
    |--model
       |--tsconfig.json
       |--src
         |--foo
            |--x.ts
            |--...
         |--bar
            |--y.ts
            |--...
            |--...
   |--control
       |--tsconfig.json
       |--src
            |--eventHandlerA.ts
            |--eventHandlerB.ts
            |--...
   |--app1
       |--tsconfig.json
       |--src
            |--app1.ts
   |--app1
       |--tsconfig.json
       |--src
            |--app2.ts

我想要的 output 是 2 個文件“app1.js”和“app2.js”。 它們都依賴於“控制器”package，它依賴於“模型”package。 我想至少運行以下命令：

• npm run build #builds javascript（可重復用於單元測試和打包）
• npm 運行 package #builds 並將 output app1.js 和 app2.js 復制到交付目錄中。 我必須能夠僅包含那些 js 文件才能在網頁中運行我的應用程序。

./tsconfig.js的內容：

{
    "references": [
        {
            "path": "app1"
        },
        {
            "path": "app2"
        }
    ],
    "include": []
}

./tsconfig.base.js的內容：

{
    "compileOnSave": true,
    "compilerOptions": {
        "composite": true
        "declaration": true,
        "moduleResolution": "node",
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react",
    }
}

/tsconfig.js的內容：

{
   "files": [],
    "include": [],
    "references": [
        {
            "path": "app1"
        },

        {
            "path": "app2"
        }
    ]
}

./webpack.conf.js的內容

module.exports = {
    mode: "production",
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx"],
    },

    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

package.json的內容

{
  "name": "abc",
  "version": "1.0.0-SNAPSHOT"
  "scripts": {
    "test": "npm run build && jest", 
    "build": "tsc -b",
    "clean": "tsc -b --clean",
    "rebuild": "npm run clean && npm run build"
  },
  "keywords": [],
  "author": "toto",
  "license": "ISC",
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

如果我運行 npm 運行構建，我會遇到導入失敗。 為了分析它，我運行了 / tsc -b control /：

error TS2307: Cannot find module 'x' or its corresponding type declarations.

4 import * as x from 'x'

我嘗試以多種方式修改我的導入，但導入時總是失敗。 如何使用絕對路徑將復合“項目”中的 class（已導出）導入另一個？

感謝您的幫助

Answer 1

要使用絕對路徑，請嘗試使用baseUrl和paths配置您的tsconfig.json文件：

{
    "compileOnSave": true,
    "compilerOptions": {
        "declaration": true,
        "moduleResolution": "node",
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react",
        "baseUrl": "../../", /// <--- baseUrl gives a path from the tsconfig to the root
        "paths": {
            "src/*": [ "../../src/*" ] /// <--- paths specify src/* is inside the src folder, which is ../../ relative to the tsconfig
        }
    },
    "include": [
        "./**/*.ts",
        "./**/*.tsx"
    ]
}