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

我想要的输出是2个文件“ app1.js”和“ app2.js”。它们都依赖于依赖于“模型”包的“控制器”包。我至少要运行以下命令：

npm run build＃构建javascript（可用于单元测试和打包）
npm运行软件包#builds并将输出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 run build，则导入失败。为了对其进行分析，我运行了/ tsc -b控件 /：

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

4 import * as x from 'x'

我试图以多种方式修改导入，但是导入总是失败。如何使用绝对路径将复合类“项目”（导出的类）导入到另一个“项目”中？

谢谢您的帮助

Answer 1

要使用绝对路径，请尝试使用tsconfig.json和baseUrl配置paths文件：

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

使用webpack配置打字稿项目

1 个答案: