Моя цель - создать библиотеку компонентов React с помощью TypeScript. Я настроил веб-пакет на связывание своих компонентов, и все работает, как и ожидалось, до тех пор, пока я не создам папку, которая выходит за рамки записи и включает в себя файлы TypeScript.
Я максимально упростил конфигурацию, и я все еще может воспроизвести проблему.
webpack.config.js const path = require('path');
const jsConfig = {
entry: './src/components/index.ts',
module: {
rules: [
{
test: /\.ts(x?)?$/,
exclude: /node_modules/,
use: {
loader: 'awesome-typescript-loader'
}
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'commonjs2',
pathinfo: true
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
externals: {
react: 'react',
'react-dom': 'react-dom'
},
optimization: {
minimize: false,
usedExports: true,
sideEffects: false
},
mode: 'production'
}
const configuration = [jsConfig];
module.exports = configuration;
tsconfig.json {
"compilerOptions": {
"module": "commonjs",
"jsx": "react",
"target": "es5",
"lib": [
"es2015",
"dom"
],
"outDir": "dist",
"sourceMap": false,
"declaration": true,
"moduleResolution": "node"
}
}
Вот исходная структура папок:
|-- node_modules
|-- src
| `-- components
| |-- Button
| | `-- Button.tsx // Example component
| `-- index.ts // A file that exports all components
|-- package.json
|-- tsconfig.json
`-- webpack.config.js
Когда я запускаю webpack, он создает папку dist со следующей структурой:
-- dist
|-- Alert
| `-- Alert.d.ts
|-- index.d.ts
`-- index.js
Это то, чего я пытаюсь достичь. Однако я хочу добавить, скажем, вспомогательную функцию и создать папку с именем helpers в src. Затем я добавляю простой helper.ts файл и просто добавляю функцию, которая регистрирует что-то на консоли. Я ничего не экспортирую и еще не вызывал вспомогательную функцию . Так что, если я сейчас запущу webpack, dist будет выглядеть так:
-- dist
|-- components
| |-- Alert
| | `-- Alert.d.ts
| `-- index.d.ts
`-- index.js
Полагаю, есть что-то важное, чего мне не хватает в понимании рабочего процесса webpack. Почему эта папка components появляется в выводе сборки? Обратите внимание, что он также оборачивает index.d.ts - определенно не то, для чего я иду.
Заранее спасибо!