用于创建前端库的jspm工作流程

Question

目前推荐的将 TypeScript 编写的库转换为ES5的做法是什么？

JSPM文档似乎适用于Web应用程序（即使用jspm bundle-sfx）。

我在Google上找到的所有文章似乎都假设是一个网络应用工作流程，而不是图书馆工作流程。

我的项目有以下设置：

• 取决于react，flux和jquery，全部通过jspm安装，并在config.js

  <中正确配置/ LI>

• 源.tsx/.ts文件位于src/树中，以及相应的已转换.js个文件

• 我可以使用jspm bundle创建一个包，但是，这仍然要求我的库的最终用户使用SystemJS

我想要的是将src/下的整个树捆绑到一个没有库的单个文件中，例如react或jquery。我怎么能这样做？

到目前为止，我已经尝试了jspm bundle src/<MY_MAIN.js> - react - jquery <OUT.js>，但是用户仍然需要一个模块加载器来与MY_MAIN.js中的导出符号进行交互。我还想为用户提供一个选项，可以使用<script>标记手动导入我的库。自执行捆绑似乎不起作用。一旦通过<script>标签加载，就无法全局访问任何符号，我无法排除框架代码。

Answer 1

我想强调基本上有三种方法，针对不同的最终用户工作流程

1。 <script/>标记方法

在这里，创建一个条目.ts文件，用于导出库的主要符号，如下所示：

// Main.ts
import {MyLib} from "./components/MyLib";
import * as React from "react";
import * as ReactDOM from "react-dom";

/**
 * browser exports
 * note, typescript cannot use interfaces as symbols for some reason, probably because they are not emitted in the compiled output
 * running `jspm bundle-sfx` results in the code here being accessible in <script /> tag
 */

(function (window) {
    window.MyLib = MyLib;
    window.React = window.React || React;
    window.ReactDOM = window.ReactDOM || ReactDOM;
})(typeof window !== "undefined" ? window : {});

然后运行jspm bundle-sfx Main.js my-lib.sfx.js，同样适用于browserify，但我们必须使用commonjs样式require()而不是ES6样式import

2。康卡特＆amp;通过常规gulp/grunt

缩小src文件

这应该是我们熟悉的好旧工作流程

3。假设ES6与将使用库

的应用程序兼容

将代码与.d.ts一起分发为ES6 / TS，并假设用户还将使用jspm / system或最终的ES6模块加载器方法来加载模块