Настройка проекта Typescript с помощью webpack - PullRequest
Новая
       108

Настройка проекта Typescript с помощью webpack

0 голосов
/ 21 июня 2020

Здравствуйте, я хотел бы настроить Typescript с составной конфигурацией и веб-пакетом (код работал хорошо при использовании одного tsconfig. json). Я точно знаю, что я TypeScript newb ie и заржавел в 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"
    }
};

содержимое пакета . 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, у меня возникнут ошибки импорта. Чтобы проанализировать его, я запустил / ts c -b control /: 

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

4 import * as x from 'x'

Я попытался изменить свой импорт несколькими способами, но у меня всегда возникал сбой при импорте. Как импортировать класс (который экспортируется) из составного «проекта» в другой, используя абсолютный путь?

Спасибо за помощь

1 Ответ

0 голосов
/ 21 июня 2020

Чтобы использовать абсолютные пути, попробуйте настроить свой 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"
    ]
}
...