javascript - การนำเข้า Webpack/ts-loader ที่มีนามสกุล .js ไม่สามารถแก้ไขได้

โครงสร้างไดเรกทอรีของฉันมีดังนี้:

projectRoot
├── project-server
│   ├── src
│   └── pom.xml
├── project-ui
│   ├── tsconfig.json
│   └── src
│       └── file.ts.  (imports ./file.js)

ปัญหาของฉันคือ project-server ใช้ไฟล์ js ที่ถูกแปลงแล้วและดังนั้นต้องการนามสกุล .js เพื่อระบุไฟล์ได้ถูกต้อง ฉันกำลังใช้ webpack-dev-server สำหรับการพัฒนาและใช้ ts-loader แต่ฉันได้รับข้อผิดพลาดว่า:

Module not found: Error: Can't resolve './file.js' in 
'/projectRoot/project-ui/src'

ต่อไปนี้คือ webpack.config.js ของฉัน:

module.exports = {
  entry: './project-ui/src/file1.ts',
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      ... other rules
    ]
  },
  resolve: {
    extensions: ['.js', '.ts'],
  }

ไฟล์ tsconfig.json ของฉันมีการตั้งค่าที่เฉพาะเจาะจงกับตำแหน่งที่ project-server ต้องการไฟล์ js กล่าวคือ "outDir": "../project-server/src/main/resources/static"

ดังนั้นฉันจึงไม่แน่ใจว่าต้องกำหนดค่า Webpack/ts-loader อย่างไรเพื่อให้สามารถแก้ไขคำสั่ง import ได้อย่างถูกต้อง

คำตอบ #1

อัปเดตล่าสุดเมื่อวันที่ 20-10-2022

Webpack v5.74.0 ถูกปล่อยออกมาในเดือนกรกฎาคม 2022 และมันรวมตัวเลือกใหม่ resolve.extensionAlias ซึ่งให้วิธีแก้ปัญหานี้

ตัวอย่างเช่น:

resolve: {
    extensionAlias: {
        '.js': ['.js', '.ts'],
    },
}

ตอบ ณ วันที่ 1 กันยายน 2021

ฉันกำลังเผชิญกับปัญหาแบบเดียวกันในขณะนี้ ตอนนี้ฉันกลัวว่าจะไม่มีคำตอบที่ดีให้คุณ แต่ฉันพบการสนทนาจากปี 2017 ที่กล่าวว่า ts-loader ไม่รองรับพฤติกรรมนี้:

https://github.com/microsoft/TypeScript/issues/16577#issuecomment-343649391

ถ้ามีการเพิ่มการสนับสนุนตั้งแต่นั้นมา ฉันยังไม่สามารถหาข้อมูลรายละเอียดเกี่ยวกับมันได้เลย

อย่างไรก็ตาม ฉันประสบความสำเร็จบ้างกับการตั้งค่า alias ในส่วน resolve.alias ของ webpack.config.js ของฉัน ดังนั้นเส้นทางสัมพัทธ์ไปยังไฟล์บางไฟล์ที่ใช้ .js จะถูก Webpack แปลงไปยังไฟล์ .ts ที่เทียบเท่า ตัวอย่างเช่น:

alias: {
    './file-processing.js': './file-processing.ts',
},

แต่นี่เป็นวิธีแก้ปัญหาที่เกะกะมากและไม่สามารถขยายได้เลย

คำตอบ #2

ts-loader ไม่รองรับการมีการนำเข้าด้วยนามสกุล .js โดยตรง ดังนั้นโปรเจกต์นี้ https://github.com/softwareventures/resolve-typescript-plugin จึงให้ขั้นตอนเพิ่มเติมที่จำเป็นเพื่อให้สิ่งนี้ทำงานได้