从同一来源构建分发软件包和NPM软件包

如何解决从同一来源构建分发软件包和NPM软件包

我经常制作小型开源工具，但我不想限制我的用户。我的程序包通常只是一个功能，所以这就是我希望用户得到的：

1. 他们可以通过 - name: "Copies files over" synchronize: src: "{{ item.source }}" dest: "{{ item.dest }}" recursive: yes notify: restart freeswitch with_items: - { source: '/Users/User1/Documents/Ansible/files/sca/dialplan/',dest: '/etc/freeswitch' } - { source: '/Users/User1/Documents/Ansible/files/sca/sip_profiles/',dest: '/etc/freeswitch' } - { source: '/Users/User1/Documents/Ansible/files/sca/scripts/',dest: '/usr/share/freeswitch/scripts' } 标签中的src添加的JS文件。该脚本应该添加我的函数，以便他们可以在下面的脚本中调用它。对于根本不想使用包管理器的用户很有用：

script

1. 可以发布为包的JS文件，因此使用NPM的用户只需键入<script src="https://amazingCDN.com/isEven.js"></script> <script> isEven() </script> ，然后导入我的包。

两个JS文件都应从相同的源构建。假设我的源代码仅包含一个命名函数，如果我使用Webpack，则应将其添加到npm install isEven中并且应该可导入。假设我将自己发布一个程序包，而我只希望自己的构建管道从源中生成两个JS文件。关于CDN，假设我使用jsDelivr，它可以从Github检索我的JS文件并将其最小化，所以我不在乎自己缩小文件。

我尝试将代码编写为模块，并使用带有独立标志的Browserify。它实际上可以与CommonJS模块一起使用，但是要使其与ES模块一起使用，我必须使用esmify，它只返回带有window键的对象，所以我不能像default那样调用它，我必须像foo()这样称呼它。这不是我想要的。

我还尝试将其编写为独立文件，只是这样做

foo.default()

这有点奏效，但我想知道是否还有更复杂，更可靠的解决方案。

我该如何实现？

解决方法

听起来您可能想将项目打包为UMD

https://github.com/umdjs/umd

汇总可以将UMD作为输出目标，并且比webpack或browserify最小（特别是对于单个功能单一的库）

isEven.mjs

function isEven(x) {
  return (x % 2) === 0 && x !== 0;
}

export {
  isEven
};

$ rollup isEven.mjs --format=umd --name=isEven

会导致

(function (global,factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'],factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self,factory(global.isEven = {}));
}(this,(function (exports) { 'use strict';

  function isEven(x) {
    return (x % 2) === 0 && x !== 0;
  }

  exports.isEven = isEven;

  Object.defineProperty(exports,'__esModule',{ value: true });

})));

我想这正是您想要的。

,

我解决了这个问题，并为此精确任务创建了一个模板存储库。

您可以从此模板创建存储库，使用ES模块将其库实现为NPM包，然后一按即会创建dist文件夹，并且将有以该库命名的分布式js文件。您的用户只需将其添加到脚本标签中，您的库就会出现在全局名称空间中。