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

Question

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

JSPM 文档似乎是针对网络应用程序的(即 jspm bundle-sfx )。

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

我的项目具有以下设置:

• 这取决于react , flux和 jquery , 全部通过 jspm 安装并在 config.js 中正确配置

• 来源.tsx/.ts文件位于 src/树，以及它们相应的转译 .js文件

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

我想要的是将整棵树捆绑在src/下到单个文件没有库，例如react或 jquery .我该怎么做？

到目前为止，我已经尝试了 jspm bundle src/<MY_MAIN.js> - react - jquery <OUT.js>这可行，但用户仍然需要一个模块加载器来与 MY_MAIN.js 中的导出符号进行交互.我还想为用户提供一个选项来手动导入我的库 <script>标签。 self 执行的 bundle 似乎不起作用。一旦通过 <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。通过常规连接和缩小 src 文件 gulp/grunt

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

3。假设将使用该库的应用程序具有 ES6 兼容性

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