Webpack - kompilace se závislostí modulu definovanou relativní cestou rubrika: Programování: JavaScript

4 mazane
položil/-a 20.7. 13:25

Mám dva moduly shared a inv. Modul inv má závislost na modulu shared definovanou v package.json pomocí file:../shared. Děje se to, že zkompiluji (resp. transpiluji) modul shared bez chyby, ale když kompiluji modul inv, tak kompilace hlásí chyby ze souborů v ../shared/src/**.

Jde o chyby typu:

ERROR in xxx\shared\src\shared.module.ts
[tsl] ERROR in xxx\shared\src\shared.module.ts(16,27)
      TS7016: Could not find a declaration file for module 'api-check'. 'xxx\shared\node_modules\api-check\dist\api-check.js' implicitly has an 'any' type.

Očekával bych, že tam se nebude webpack při kompilaci inv vůbec dívat, protože by mu mělo stačit jen ../shared/dist a ../shared/dist/@types. A taky když ../shared/src/*. smažu a nechám jen dist, tak najednou kompilace inv proběhne bez problémů. Dokázal by mi někdo vysvětlit, kde mám chybu v úsudku?

shared/tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "strict": true,
        "strictNullChecks": false,
        "declaration": true,
        "declarationDir": "./dist/@types",
        "declarationMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "typeRoots": [
            "./node_modules/@types",
            "./@types"
        ],
        "types": [
            "node"
        ],
        "lib": [
            "es2015",
            "dom",
            "dom.iterable"
        ] 
    },
    "exclude": [
        "node_modules"
    ]
}

shared/package.json

{
  "name": "@proces/shared",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "typings": "dist/@types/shared.export.d.ts",
  "files": [
    "/src"
  ],
  "scripts": {
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "api-check": "^7.5.5",
  },
  "devDependencies": {
    "@types/node": "^14.0.13",
    "css": "^2.2.4",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "style": "0.0.3",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.5",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

shared/webpack.config.js

"use strict";;
const path = require('path');

const config = {
    mode: "development",
    entry: "./src/shared.export.ts",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        libraryTarget: 'umd',
        library: 'shared',
        umdNamedDefine: true
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader'],
                exclude: [/node_modules/]
            },
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.ttf$/,
                use: ['file-loader']
            }
        ]
    },

    externals: {
        'api-check': 'apiCheck'
    },
    resolve: {
        extensions: [
            '.tsx',
            '.ts',
            '.js'
        ]
    },
    plugins: [
    ]
};

module.exports = config;

inv/tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "strict": true,
        "strictNullChecks": false,
        "declaration": true,
        "declarationDir": "./dist/@types",
        "declarationMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "typeRoots": [
            "./node_modules/@types",
            "./@types",
            "./node_modules/@proces/shared/dist/@types"
        ],
        "types": [
            "node"
        ],
        "lib": [
            "es2015",
            "dom",
            "dom.iterable"
        ] 
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/shared/**/*.ts"
    ]
}

inv/package.json

{
  "name": "@proces/inv",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "typings": "dist/@types/inv.export.d.ts",
  "scripts": {
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.0.13",
    "css-loader": "^3.6.0",
    "html-loader": "^1.1.0",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@proces/shared": "file:../shared"
  }
}

inv/webpack.config.js

"use strict";
const path = require('path');

const config = {
    stats: {
        chunks: true,
        logging: 'verbose',
        providedExports: true,
        maxModules: Infinity,
        usedExports: true,
        nestedModules: true,
    },
    mode: "development",
    entry: "./src/inv.export.ts",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader'],
                exclude: [/node_modules/]
            },
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.ttf$/,
                use: ['file-loader']
            }
        ],
        noParse: /shared\/src/
    },
    externals: {
        '@proces/shared': '@proces/shared'
    },
    resolve: {
        extensions: [
            '.tsx',
            '.ts',
            '.js'
        ]
    },
    plugins: [
    ]
};

module.exports = config;
odkaz
5 vit.herman
odpověděl/-a 20.7. 23:28

Vypadá zcela to docela evidentně na to, že "kdesi" dostane přednost import ts souborů z balíčku shared místo použití výsledných typových definic. Očekávání, že by mu mělo stačit jen ../shared/dist a ../shared/dist/@types bude nejspíš liché, protože podle https://www.typescriptlang.org/docs/handbook/module-resolution.html mívá obvykle přednost reálně nalezený zdroják.

Komentáře

  • mazane : Já se bojím, jestli do toho nezasahuje webpack. Protože dle odkazovaného dokumentu by mělo stačit odstranit "files": ["/src"] a nechat jen "typings": "dist/@types/shared.export.d.ts", ale webpack stejně z nějakého důvodu najde to /src a začne se koukat tam. 21.7. 15:37
  • vit.herman : @mazane: Mohl by to teoreticky dělat ts-loader, to je fakt. I když se domnívám, že ten ctí module resolution TypeScriptu. Podle mne by se popisované chování jednoznačně projevilo, pokud bys měl projekt umístěn v podadresáři node_modules. Pokud ne, tak to zůstává záhadou. Možná pomůže volba --traceResolution. 22.7. 0:09
  • mazane : V node-modules je, protože v inv/package.json mám "dependencies": {"@proces/shared": "file:../shared" }, takže se to stahuje jako normální modul. Vlastně ne tak doslova, protože se tam udělá se jen symlink. Ale symlink asi nehraje roli. 22.7. 8:56

Pro plný přístup na Devel.cz se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.