如何捆绑在 Typescript 中实现的 JavaScript 库，该库可在浏览器中使用 require、import 和 <script> 标签？答案

【问题标题】：How to bundle javascript library implemented in Typescript that works in browser with require, import and <script> tag?如何捆绑在 Typescript 中实现的 JavaScript 库，该库可在浏览器中使用 require、import 和 <script> 标签？
【发布时间】：2017-10-20 03:14:42
【问题描述】：

我正在开发一个用 Typescript 编写的库，现在我想发布这个库。

其他用户将通过以下方式包含该库：

// Using require
const Library = require('library');
Library.someFunction();

// Using import
import Library from 'library';
Library.someFunction();

// Using script tag
<script src="dist/library.js"></script>
<script>
    Library.someFunction();
</script>

我的库的主类是一个只有静态函数的类：

export default class Library {

    public static someFunction(data: any) {
        // Do something...
    }
}

这是我的 webpack 配置：

module.exports = {
    entry: helpers.root('src/Library.ts'),
    devtool: 'source-map',
    output: {
        path: helpers.root('dist'),
        filename: 'library.js',
        library: 'Library',
        libraryTarget: 'umd',
        umdNamedDefine: true,
    },
    ...
}

这是以这种方式生成一个包：

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define("Library", [], factory);
    else if(typeof exports === 'object')
        exports["Library"] = factory();
    else
        root["Library"] = factory();
})(this, function() {
    ...
});

但在我的 Angular 2 项目中导入的唯一方法是使用以下代码：

// Using require
const Library1 = require('library');
Library1.Library.someFunction();
// Using import
import * as Library2 from 'library';
Library2.Library.someFunction();

在浏览器中：

<script src="dist/library.js"></script>
<script>
    Library.Library.someFunction();
</script>

如何解决这个问题？

【问题讨论】：

标签： javascript typescript bundle webpack-2 umd

【解决方案1】：

好的，我可以通过创建另一个仅导出函数的文件 (entry.ts) 来使其工作：

import {Library} from 'Library;

export function someFunction(): void {
    return Library.someFunction();
}

并更改 webpack 配置条目：

module.exports = {
    entry: helpers.root('src/entry.ts'),
    ....
}

现在我可以使用脚本标签在浏览器上导入库：

<script src="dist/library.js"></script>
<script>
    Library.someFunction();
</script>

我也可以在我的 Angular 2 项目中导入：

import * as Library from 'library';
Library.someFunction();

这是生成的对象：

{__esModule: true, someFunction: ƒ}

以前是这样创建对象的：

{__esModule: true, Library: ƒ}

【讨论】：