Typescript AMD 模块 - 脚本未运行

Question

I'm working on my Chrome extension and I want to add typescript to my project. So far I've been able to build my app without any compile/runtime errors (using require.js) this way:

tsconfig-bg.json (the same way I'm building scripts for content script and popup):

{
  "compilerOptions": {
    "module": "AMD",
    "target": "ES6",
    "outDir": "build",
    "outFile": "build/background.js",
    "rootDir": "src"
  },
  "files": [
    "src/consts.ts",
    "src/background.ts",
  ],
}

manifest.json :

"background": {
  "scripts": ["require.js", "background.js"],
  "persistent": false
},
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["require.js", "content.js"]
  }
],
"browser_action": {
  "default_popup": "popup.html",
  "default_title": "__MSG_appName__"
}

background.ts :

import { Consts } from "./consts"
console.log("It is running!!");

consts.ts :

export const Consts = { ... }

There is not any error in console or wherever. But the problem is none of my scripts is running. Only the popup will appear when clicking on extension's icon, but no js script is running in either background, content or popup even if all the resources are loaded. I guess I should define the entry point somehow, but how could I do that?

What I'm supposed to do now?

Answer 1

AFAIK it seems like it is not possible to use.js scripts that have been builded by Typescript in browser without using Webpack, Rollup or others. Even if

  "compilerOptions": {
    "module": "none"
  },

Everything I need is working type control, so I must use import/export keywords which results in:

Object.defineProperty(exports, "__esModule", { value: true });
const consts_1 = require("./consts");

and browsers do not have require() function.

If it is really true, that's just plain stupid:(