Webpack - kompilace se závislostí modulu definovanou relativní cestou rubrika: Programování: JavaScript
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;
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.
Pro plný přístup na Devel.cz se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře