ค้นหาเว็บไซต์

webpack - สร้างโมดูล TypeScript เป็นไฟล์ JavaScript แยกต่างหาก


ฉันกำลังเขียนไลบรารีและฉันต้องการจัดเตรียมทั้งแพ็กเกจรวม (ที่ไฟล์ทั้งหมดถูกรวมกัน) และ โฟลเดอร์ js โดยที่แต่ละโมดูลถูกสร้างแยกกันพร้อมกับไฟล์ .d.ts ของมันอยู่ข้างๆ เป้าหมายของฉันคือเพื่อให้สามารถ:

  1. การใช้ไฟล์แยกเป็นโมดูล TS จากโฟลเดอร์ src
  2. การใช้ไฟล์เป็นโมดูล JS จากโฟลเดอร์ js เมื่อคุณไม่ต้องการคอมไพล์ TypeScript
  3. การใช้ชุดรวมเมื่อคุณไม่ต้องการคอมไพล์อะไรเลย

ฉันกำลังใช้ 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 แยกต่างหากได้ เป็นไปได้ไหม?

บทความที่เกี่ยวข้อง