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

jspm workflow for creating front-end libraries

本文关键字：jspm 工作流 创建 前端 用于      更新时间：2023-09-26

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

JSPM文档似乎面向web应用程序（即jspm bundle-sfx）。

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

我的项目有以下设置：

  • 它取决于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>标记的库的选项。自行执行的捆绑包似乎不起作用。一旦通过<script>标签加载，就无法全局访问任何符号，并且我不能排除框架代码。

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

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.凹形&通过常规gulp/grunt最小化src文件

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

3.假设ES6与将使用库的应用程序兼容

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

相关文章：