typescript - วิธีการตั้งค่า tsconfig.json สำหรับส่วนขยาย Chrome เพื่อให้ฉันสามารถสร้างโมดูลได้

ฉันกำลังเขียน TypeScript บางส่วนใน VS Code สำหรับปลั๊กอิน Chrome การแปลง TypeScript เป็น JavaScript ทำงานได้ดี แต่ไฟล์ .ts หลักของฉันมีขนาดใหญ่พอสมควรจนฉันอยากจะแยกบางโค้ดออกไปเป็นโมดูลแยกต่างหาก

ฉันสร้างไฟล์หนึ่งชื่อ common.ts และย้ายค่าคงที่และฟังก์ชันบางส่วนของฉันไปยังไฟล์นั้น:

export function doSomething(foo : string): string { ... }

จากไฟล์ .ts หลักของฉัน ฉันสามารถอ้างอิงถึงการส่งออกเหล่านี้โดยการระบุคุณสมบัติ เช่น:

let result = common.doSomething("foo");

ปัจจุบัน ฉันสามารถนำเข้ารหัสนี้ด้วย:

import common = require("./common");

VS Code ไม่มีปัญหาเกี่ยวกับการเติมคำอัตโนมัติหรือการสร้าง; อย่างไรก็ตาม เมื่อฉันเปิดส่วนขยายของฉัน ฉันได้รับข้อผิดพลาด:

เกิดข้อผิดพลาด ReferenceError ที่ไม่ได้จับ: define ไม่ได้ถูกกำหนดที่ popup.ts:2

นี่ชี้ไปยังส่วนนี้ของ JavaScript ที่สร้างขึ้น:

define(["require", "exports", "./common"], function (require, exports, common) {

ไฟล์ tsconfig.json ของฉันในปัจจุบันคือ:

{
    "compilerOptions": {
        "target": "es6",
        "module": "amd",
        "sourceMap": true
    }
}

ฉันได้ลองใช้โมดูล "commonjs" แล้ว แต่ฉันอ่านมาว่าเบราว์เซอร์ไม่รองรับสิ่งนั้น แม้ว่าจะเป็นเช่นนั้น เมื่อฉันลองใช้ มันก็ยังมีข้อผิดพลาดคล้าย ๆ กันเกี่ยวกับ "exports" ที่ไม่ได้ถูกกำหนด:

Object.defineProperty(exports, "__esModule", { value: true });

ฉันก็ได้ลองใช้โมดูล "system" แล้ว แต่ปัญหาเดียวกันเกิดขึ้นโดยที่ "System" ยังไม่ถูกกำหนด:

System.register(["./common"], function (exports_1, context_1) {

และสุดท้ายกับ "es2015" ซึ่งต้องให้ฉันนำเข้าแทนเป็น import * as common from "./common"; บรรทัดโค้ดนี้ถูกทำซ้ำตรง ๆ ในไฟล์ .js และ Chrome ให้ข้อผิดพลาดกับฉัน:

ข้อผิดพลาดของไวยากรณ์ที่ไม่ได้จับ: ตัวอักษร * ที่ไม่คาดคิด

ฉันยังได้เปลี่ยนเป้าหมายจาก es6 เป็นเป้าหมายอื่นๆ หลายแบบ และฉันลองนำเข้าแทนเป็น import { doSomething } from "./common" แล้ว

วิธีที่เหมาะสมในการกำหนดค่า tsconfig.json เพื่อเขียนโมดูล (หมายเหตุ: ฉันไม่ได้ใช้คำสำคัญ module หรือ namespace ใน common.ts: มันเป็นเพียงชุดของคำสั่ง export) และเพื่อ import โมดูลเพื่อที่ฉันจะสามารถทำความสะอาดโค้ดนี้และใช้งานในเบราว์เซอร์ได้อย่างไร?

คำตอบ #1

ตามงานวิจัยเบื้องต้นบางอย่าง (ฉันไม่เคยพัฒนาส่วนขยายของ Chrome ด้วยตัวเอง) คุณจะต้อง:

ใช้ตัวรวมไฟล์เช่น Webpack ที่สามารถแปลงหนึ่งในรูปแบบการส่งออก "module" ที่ TypeScript รองรับเป็นไฟล์ JavaScript เดียว หรือ
ตั้งค่า "module": "es2015" และใช้หน้า HTML เพื่อโหลดโมดูลของคุณเข้าไปใน Chrome ตามที่อธิบายไว้ที่นี่หรือตรงนี้