使用 webpack 配置 Typescript 项目

Question

Hello I would like to configure Typescript with composite config and webpack (the code was working well when using a single tsconfig.json ). I precise that I am TypeScript newbie and rusted in javascript. I have difficulties to obtain my outputs json files.

EDIT : I added a bit more configuration and changed the directory structure for something better I believe

My project structure:

    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

My desired output are 2 files "app1.js" and "app2.js". Both of them rely on a "controller" package which relies on a "model" package. I would like to run at least the following commands:

• npm run build #builds the javascript (can be reused for unit testing and package)
• npm run package #builds and copy the output app1.js and app2.js in a delivery directory. I must be able to include only those js files to run my application in a webpage.

Content of ./tsconfig.js :

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

Content of ./tsconfig.base.js :

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

Content of /tsconfig.js :

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

        {
            "path": "app2"
        }
    ]
}

Content of ./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"
    }
};

content of 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": {
    ...
  }
}

If I run npm run build, I have import failures. To analyze it I ran / tsc -b control /:

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

4 import * as x from 'x'

I tried to modify my import in several ways but I always have a failure on the import. How to import a class (which is exported) from a composite "project" to another using absolute path?

Thank you for helping

Answer 1

To use absolute paths try to configure your tsconfig.json file with baseUrl and 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"
    ]
}