Я разрабатываю библиотеку, которая будет использоваться в других проектах. Для локальной разработки хочется билдить и использовать в других проектах через npm/yarn link. Она билдится вебапаком, но оказалось, что его поведение может быть различным на разных машинах.
Для начала упрощенная структура папок в библиотеке:
lib/
dist/
src/
folder1/
folder2/
index.ts
package.json
tsconfig.json
webpack.config.js
На моей машине работает правильно - команда webpack
билдит код в папку dist/
и dist/
содержит folder1/
, folder2/
, index.js
, index.d.ts
, index.d.ts.map
:
dist/
folder1/
folder2/
index.js
index.d.ts
index.d.ts.map
Но на машине моего коллеги webpack
оборачивает все в дополнительную папку src
и оно выглядит так:
dist/
src/
folder1/
folder2/
index.d.ts
index.d.ts.map
index.js
Мне нужно первое поведение, потому что сторонние библиотеки не находят файл index.d.ts и кидают ошибки об этом. Что нужно изменить, что получать везде одинаковые результат билда?
Ниже представлены конфигурации файлов webpack.config.js
, tsconfig.json
и package.json
.
webpack.config.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const EsmWebpackPlugin = require('@purtuga/esm-webpack-plugin');
module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
configFile: 'tsconfig.json'
}
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
plugins: [new TsconfigPathsPlugin()],
alias: { react: require.resolve("react") }
},
output: {
filename: "index.js",
path: path.resolve(__dirname, 'dist'),
library: 'LIB',
libraryTarget: 'var'
},
plugins: [new EsmWebpackPlugin({moduleExternals: true})],
externals: ['react', 'react-dom']
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"outDir": "./dist",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"moduleResolution": "node",
"module": "esnext",
"target": "es5",
"jsx": "react",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"noEmit": false,
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"allowJs": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"skipDefaultLibCheck": true,
"noFallthroughCasesInSwitch": true,
"resolveJsonModule": true,
"isolatedModules": true,
"strictPropertyInitialization": false,
"experimentalDecorators": true
},
"include": [
"src/"
],
"exclude": [
"./node_modules",
"**/__tests__/*"
]
}
package.json (partially)
{
...
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"files": [
"dist/"
],
"scripts": {
"build": "webpack"
}
...
}