webpack - สร้างโมดูล TypeScript เป็นไฟล์ JavaScript แยกต่างหาก
ฉันกำลังเขียนไลบรารีและฉันต้องการจัดเตรียมทั้งแพ็กเกจรวม (ที่ไฟล์ทั้งหมดถูกรวมกัน) และ โฟลเดอร์ js โดยที่แต่ละโมดูลถูกสร้างแยกกันพร้อมกับไฟล์ .d.ts ของมันอยู่ข้างๆ เป้าหมายของฉันคือเพื่อให้สามารถ:
- การใช้ไฟล์แยกเป็นโมดูล TS จากโฟลเดอร์
src - การใช้ไฟล์เป็นโมดูล JS จากโฟลเดอร์
jsเมื่อคุณไม่ต้องการคอมไพล์ TypeScript - การใช้ชุดรวมเมื่อคุณไม่ต้องการคอมไพล์อะไรเลย
ฉันกำลังใช้ ts-loader เพื่อคอมไพล์โมดูล TypeScript จำนวนมากด้วย webpack.config.js ดังต่อไปนี้:
let path = require('path')
module.exports = {
entry: {
main: './src/index.ts'
},
output: {
path: path.resolve(__dirname, 'js')
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
}
...และ tsconfig.json ดังต่อไปนี้:
{
"compilerOptions": {
"outDir": "js",
"module": "commonjs",
"target": "es5",
"lib": [
"es2015",
"dom",
"dom.iterable"
],
"declaration": true,
"strictBindCallApply": true,
"downlevelIteration": true
}
}
ด้วยการตั้งค่านี้ การรัน webpack จะได้ผลลัพธ์เป็น bundle และไฟล์ .d.ts ทั้งหมดในโฟลเดอร์ js ซึ่งอยู่กึ่งกลางของสิ่งที่ฉันต้องการ ฉันต้องการให้แต่ละไฟล์ .ts ในกราฟการขึ้นต่อกันถูกสร้างถัดจากไฟล์ .d.ts ของมันเป็นไฟล์ .js แทน กล่าวโดยสรุป ฉันต้องการ Webpack config สองตัว:
- อันที่สร้างไฟล์
.jsและ.d.tsในโครงสร้างไดเรกทอรีที่สะท้อนsrc - อีกอันหนึ่งที่ปล่อยออกมาเป็นแค่ชุดเดียว
ก่อนจะเผยแพร่ ฉันรันทั้งสองการกำหนดค่าและฉันได้ทุกอย่างที่ต้องการ อย่างไรก็ตาม ฉันไม่สามารถให้ ts-loader สร้างไฟล์ .js แยกต่างหากได้ เป็นไปได้ไหม?