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

4 mazane
položil/-a 20.7.2020

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.2020

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.2020
  • 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.2020
  • 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.2020

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.