Question

我已经在Typescript上编写了一个项目，并进行了设置，以将其与webpack捆绑在一起。主要功能包装在一个Main类中，但是它也导入了其他类。需要导出Main类并将所有相关类导出到一个bundle.js库中，以便在其他站点中使用。

我试图将类捆绑在单独的项目中（没有webpack只是tsc）。

这是tsconfig.json：

{
  "compilerOptions": {
    "module": "amd",
    "target": "ES2015",
    "declaration": true,
    "outDir": "./dist",
    "outFile": "./dist/index.js",
  },
  "include": [
    "src/**/*"
  ]
}

但由于错误而无法使用

ReferenceError：定义未定义
  编译后的代码包含edfine
  define（“ Globals”，[“ require”，“ exports”]，函数（require，导出）{

以及webpack，但不确定设置是否正确捆绑文件以

开头

(function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

换句话说，我有一些课程：

Main.ts
A.ts
B.ts
C.ts

，我希望获得bundle.js文件并像这样使用：

<script type="text/javascript" src="mylib/dist/index.js"></script>
//...
var a = new Main();

但坚持理解Typescript和Jsvascript应该如何协同工作。

将感谢您的帮助

更新：设法用webpack解决。编译后，可从条目Main中访问app.ts。因此，在app.ts内添加了window.onload处理程序并将类分配给window范围。

window.onload = function () {
    window['MyClass'] = Main;

可能遗漏了一些东西，但找不到有关在TypeScript上为浏览器编写库的良好文档。

Update2：好。找到答案。 webpack选项library正常工作。

output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
    library: "MyMainClass"
},

还必须将tsconfig.json target选项从es6更改为es5

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { "*": ["types/*"] },
        "lib": [
            "dom",
            "es6",
            "dom.iterable",
            "scripthost"
        ],
        "module": "commonjs",
        "target": "es5"
    },
    "exclude": [
      "node_modules"
    ]
}

与Webpack捆绑在一起的Typescript类

0 个答案: