blocks|key|2917997|text|到目前为止，我看到的模式是将es6文件保存在src目录中，并在npm的预发布到lib目录中构建您的内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2917998|您将需要一个类似于.gitignore的.npmignore文件，但忽略src而不是lib。|2917999|entityMap^0|M|3|13|3|0|10|3|16|3|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

The pattern I have seen so far is to keep the es6 files in a <code>src</code> directory and build your stuff in npm's prepublish to the <code>lib</code> directory.

You will need an .npmignore file, similar to .gitignore but ignoring <code>src</code> instead of <code>lib</code>.

blocks|key|2705403|text|NPM包的两个标准是，它只需要一个require(+'package'+)就可以使用，并且可以做一些类似软件的事情。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2705404|如果你满足了这两个要求，你就可以做任何你想做的事情。即使模块是用ES6编写的，如果最终用户不需要知道这一点，我现在也会转译它，以获得最大的支持。|2705405|但是，如果像koa一样，您的模块需要与使用ES6特性的用户兼容，那么使用两个包的解决方案可能会更好。|2705406|外卖|2705407|2705408|只发布使require(+'your-package'+)工作所需的代码。|ordered-list-item|2705409|除非ES5和6之间的关系对用户很重要，否则只发布1个包。如有必要，请转译。|2705410|2705411|entityMap|0|LINK|mutability|MUTABLE|url|http://koajs.com/^0|H|K|0|0|6|3|0|0|0|0|4|P|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|J|3|K|5|6|7|18|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|19|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|O|7|1D|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

The two criteria of an NPM package is that it is usable with nothing more than a <code>require( 'package' )</code> and does something software-ish.

If you fulfill those two requirements, you can do whatever you wish.
Even if the module is written in ES6, if the end user doesn't need to know that, I would transpile it for now to get maximum support.

However, if like <a href="http://koajs.com" rel="nofollow">koa</a>, your module requires compatibility with users using ES6 features, then perhaps the two package solution would be a better idea.

<h2>Takeaway</h2>

<ol>
<li>Only publish as much code as you need to make <code>require( 'your-package' )</code> work.</li>
<li>Unless the between ES5 &amp; 6 matters to the user, only publish 1 package. Transpile it if you must.</li>
</ol>

blocks|key|2705448|text|@Jose是对的。将ES6/ES2015发布到NPM没有什么问题，但这可能会带来麻烦，特别是如果使用您的软件包的人正在使用Webpack，例如，因为出于性能原因，通常人们在使用babel进行预处理时会忽略node_modules文件夹。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2705449|因此，只需使用gulp、grunt或简单的Node.js来构建一个lib文件夹，即ES5。|2705450|下面是我的build-lib.js脚本，我将其保存在./tools/中(这里没有gulp或grunt+)：|2705451|var+rimraf+=+require('rimraf-promise');
var+colors+=+require('colors');
var+exec+=+require('child-process-promise').exec;

console.log('building+lib'.green);

rimraf('./lib')
++++.then(function+(error)+{
++++++++let+babelCli+=+'babel+--optional+es7.objectRestSpread+./src+--out-dir+./lib';
++++++++return+exec(babelCli).fail(function+(error)+{
++++++++++++console.log(colors.red(error))
++++++++});
++++}).then(()+=>+console.log('lib+built'.green));|code-block|syntax|javascript|2705452|最后一个建议:你需要在你的中添加一个.npmignore。如果npm+publish找不到这个文件，它将改用.gitignore，这会给你带来麻烦，因为通常你的.gitignore文件会排除./lib并包含./src，这与你发布到NPM时想要的正好相反。.npmignore文件的语法与.gitignore+(AFAIK)基本相同。|2705453|entityMap^0|2G|5|2U|C|0|7|4|C|5|X|3|0|5|C|Q|8|14|4|19|5|0|0|V|B|1I|A|28|A|2N|5|2V|5|3J|A|3Z|A|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|R|$]]

@Jose is right. There's nothing wrong with publishing ES6/ES2015 to NPM but that may cause trouble, specially if the person using your package is using Webpack, for instance, because normally people ignore the <code>node_modules</code> folder while preprocessing with <code>babel</code> for performance reasons.

So, just use <code>gulp</code>, <code>grunt</code> or simply Node.js to build a <code>lib</code> folder that is ES5.

Here's my <code>build-lib.js</code> script, which I keep in <code>./tools/</code> (no <code>gulp</code>or <code>grunt</code> here):

<pre><code>var rimraf = require('rimraf-promise');
var colors = require('colors');
var exec = require('child-process-promise').exec;

console.log('building lib'.green);

rimraf('./lib')
 .then(function (error) {
 let babelCli = 'babel --optional es7.objectRestSpread ./src --out-dir ./lib';
 return exec(babelCli).fail(function (error) {
 console.log(colors.red(error))
 });
 }).then(() =&gt; console.log('lib built'.green));
</code></pre>

Here's a last advice: You need to add a .npmignore to your project. If <code>npm publish</code> doesn't find this file, it will use <code>.gitignore</code> instead, which will cause you trouble because normally your <code>.gitignore</code> file will exclude <code>./lib</code> and include <code>./src</code>, which is exactly the opposite of what you want when you are publishing to NPM. The <code>.npmignore</code> file has basically the same syntax of <code>.gitignore</code> (AFAIK).

blocks|key|2705514|text|我喜欢José的回答。我注意到已经有几个模块遵循了这个模式。下面是你可以轻松地用Babel6实现它的方法。我在本地安装babel-cli，所以如果我改变我的全局babel版本，构建就不会中断。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2705515|.npmignore|BOLD|2705516|/src/|code-block|syntax|javascript|2705517|.gitignore|2705518|/lib/
/node_modules/|2705519|安装Babel|2705520|npm+install+--save-dev+babel-core+babel-cli+babel-preset-es2015|2705521|package.json|2705522|{
++"main":+"lib/index.js",
++"scripts":+{
++++"prepublish":+"babel+src+--out-dir+lib"
++},
++"babel":+{
++++"presets":+["es2015"]
++}
}|2705523|entityMap^0|1N|9|0|0|A|0|0|0|A|0|0|0|7|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|18|8|@$9|19|A|1A|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1C|8|@$9|1D|A|1E|B|H]]|D|@]|E|$]]|$1|T|3|U|5|K|7|1F|8|@]|D|@]|E|$L|M]]|$1|V|3|W|5|6|7|1G|8|@$9|1H|A|1I|B|H]]|D|@]|E|$]]|$1|X|3|Y|5|K|7|1J|8|@]|D|@]|E|$L|M]]|$1|Z|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|10|$]]

I like José's answer. I've noticed several modules follow that pattern already. Here's how you can easily implement it with Babel6. I install <code>babel-cli</code> locally so the build doesn't break if I ever change my global babel version.

.npmignore

<pre><code>/src/
</code></pre>

.gitignore

<pre><code>/lib/
/node_modules/
</code></pre>

Install Babel

<pre><code>npm install --save-dev babel-core babel-cli babel-preset-es2015
</code></pre>

package.json

<pre><code>{
 "main": "lib/index.js",
 "scripts": {
 "prepublish": "babel src --out-dir lib"
 },
 "babel": {
 "presets": ["es2015"]
 }
}
</code></pre>

blocks|key|136556|text|如果你想在一个非常简单的开源Node模块中看到这一点，那么可以看看nth-day+(它是我创建的--也是其他贡献者)。查看package.json文件和预发布步骤，这将引导您到哪里以及如何执行此操作。如果您克隆了该模块，则可以在本地运行它，并将其用作您的模板。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|136557|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/guyellis/nth-day^0|X|7|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you want to see this in action in a very simple small open source Node module then take a look at <a href="https://github.com/guyellis/nth-day" rel="noreferrer">nth-day</a> (which I started - also other contributors). Look in the package.json file and at the prepublish step which will lead you to where and how to do this. If you clone that module you can run it locally and use it as a template for yous.

blocks|key|2705580|text|对于任何人，直接从github使用自己的模块，而不是通过发布的模块，有一些额外的注意事项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2705581|(widely+used)“预发布”钩子不会为您做任何事情。|offset|length|2705582|一个人能做的最好的事情(如果计划依赖于github回购，而不是发布的东西)：|2705583|2705584|将src从.npmignore中删除(换句话说:允许它)。如果您没有.npmignore，请记住:将在安装位置使用.gitignore的副本，正如ls+node_modules/yourProject将向您展示的那样。|unordered-list-item|style|CODE|2705585|请确保，babel-cli是您的模块中的一个依赖项，而不仅仅是一个devDepenceny，因为您实际上是在消费机器上构建，即在应用程序开发人员计算机上构建，该计算机使用您的模块|2705586|进行构建，在install+hook中，即：|2705587|2705588|"install":+"babel+src+-d+lib+-s"|2705589|(尝试任何"preinstall"，即babel-cli可能丢失)没有任何附加价值)|2705590|entityMap|0|LINK|mutability|MUTABLE|url|https://www.google.de/search?q=site:github.com%2B%2522prepublish:%2Bnode_modules/babel-cli/bin/babel.js%2Bsrc%2B--out-dir%2Blib%2522|1|https://docs.npmjs.com/misc/scripts^0|0|1|B|0|0|0|0|1|3|Y|A|1L|A|21|R|0|4|9|0|6|C|1|0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1D|8|@$D|1E|E|1F|L|M]|$D|1G|E|1H|L|M]|$D|1I|E|1J|L|M]|$D|1K|E|1L|L|M]]|9|@]|A|$]]|$1|N|3|O|5|K|7|1M|8|@$D|1N|E|1O|L|M]]|9|@]|A|$]]|$1|P|3|Q|5|K|7|1P|8|@]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|R|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1U|8|@$D|1V|E|1W|L|M]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1X|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

<h2>A few extra notes for anyone, using own modules directly from github, not going through published modules:</h2>

The (<a href="https://www.google.de/search?q=site:github.com+%22prepublish:+node_modules/babel-cli/bin/babel.js+src+--out-dir+lib%22" rel="nofollow noreferrer">widely used</a>) "prepublish" hook is not doing anything for you.

Best thing one can do (if plans to rely on github repos, not published stuff):

<ul>
<li>unlist <code>src</code> from .npmignore (in other words: allow it). If you don't have an <code>.npmignore</code>, remember: A copy of <code>.gitignore</code> will be used instead in the installed location, as <code>ls node_modules/yourProject</code> will show you.</li>
<li>make sure, <code>babel-cli</code> is a depenency in your module, not just a devDepenceny since you are indeed building on the consuming machine aka at the App developers computer, who is using your module</li>
<li>do the build thing, in the <a href="https://docs.npmjs.com/misc/scripts" rel="nofollow noreferrer">install hook</a> i.e.:

<code>"install": "babel src -d lib -s"</code></li>
</ul>

(no added value in trying anything "preinstall", i.e. babel-cli might be missing)

blocks|key|2705605|text|package.json中的主键决定了包发布后的入口点。所以你可以把你的巴别塔的输出放在任何你想要的地方，只需要在main键中提到正确的路径即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2705606|"main":+"./lib/index.js",|code-block|syntax|javascript|2705607|这里有一篇写得很好的关于如何发布npm包的文章。|2705608|https://codeburst.io/publish-your-own-npm-package-ff918698d450|2705609|下面是一个可供参考的示例存储库|2705610|https://github.com/flexdinesh/npm-module-boilerplate|2705611|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|C|1L|4|0|0|0|0|1Q|0|0|0|0|1G|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|P|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|S|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|N]]|Z|$5|V|W|X|E|$Y|R]]]]

The main key in <code>package.json</code> decides the entry point to the package once it's published. So you can put your Babel's output wherever you want and just have to mention the right path in <code>main</code> key.

<pre><code>"main": "./lib/index.js",
</code></pre>

Here's a well written article on how to publish an npm package

<a href="https://codeburst.io/publish-your-own-npm-package-ff918698d450" rel="nofollow noreferrer">https://codeburst.io/publish-your-own-npm-package-ff918698d450</a>

Here's a sample repo you can use for reference

<a href="https://github.com/flexdinesh/npm-module-boilerplate" rel="nofollow noreferrer">https://github.com/flexdinesh/npm-module-boilerplate</a>

blocks|key|135637|text|根据您模块的结构，此解决方案可能不起作用，但是如果您的模块是包含在单个文件中的，并且没有依赖(不使用导入)，使用以下模式，您可以按原样发布代码，并将能够使用导入(浏览器ES6模块)和需要(节点CommonJS模块)导入代码|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|135638|此外，它还适合使用脚本HTML元素进行导入。|135639|main.js：|135640|(function(){
++++'use+strict';
++++const+myModule+=+{
++++++++helloWorld+:+function(){+console.log('Hello+World!'+)}+
++++};

++++//+if+running+in+NODE+export+module+using+NODEJS+syntax
++++if(typeof+module+!==+'undefined')+module.exports+=+myModule+;
++++//+if+running+in+Browser,+set+as+a+global+variable.
++++else+window.myModule+=+myModule+;
})()|code-block|syntax|javascript|135641|my-module.js：|135642|++++//+import+main.js+(it+will+declare+your+Object+in+the+global+scope)
++++import+'./main.js';
++++//+get+a+copy+of+your+module+object+reference
++++let+_myModule+=+window.myModule;
++++//+delete+the+the+reference+from+the+global+object
++++delete+window.myModule;
++++//+export+it!
++++export+{_myModule+as+myModule};|135643|package.json+:`|135644|++++{
++++++++"name"+:+"my-module",+//+set+module+name
++++++++"main":+"main.js",++//+set+entry+point
++++++++/*+...other+package.json+stuff+here+*/
++++}|135645|135646|要使用您的模块，您现在可以使用常规语法...|135647|在节点中导入时...|135648|++++let+myModule+=+require('my-module');
++++myModule.helloWorld();
++++//+outputs+'Hello+World!'|135649|在BROWSER中导入时...|135650|++++import+{myModule}+from+'./my-module.js';
++++myModule.helloWorld();
++++//+outputs+'Hello+World!'|135651|或者甚至在使用HTML脚本元素时...|135652|<script+src="./main.js"></script>
<script>
+++++myModule.helloWorld();
++++//+outputs+'Hello+World!'
</script>|135653|entityMap^0|13|7|1E|2|26|2|2J|2|0|0|0|7|0|0|0|C|0|0|0|C|0|0|0|0|1|2|0|0|1|7|0|0|7|8|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1M|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1Q|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1U|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|U|3|V|5|L|7|1Y|8|@]|D|@]|E|$M|N]]|$1|W|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|20|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|11|3|12|5|L|7|24|8|@]|D|@]|E|$M|N]]|$1|13|3|14|5|6|7|25|8|@$9|26|A|27|B|C]]|D|@]|E|$]]|$1|15|3|16|5|L|7|28|8|@]|D|@]|E|$M|N]]|$1|17|3|18|5|6|7|29|8|@$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|19|3|1A|5|L|7|2C|8|@]|D|@]|E|$M|N]]|$1|1B|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]]|1C|$]]

Deppending on the anatomy of your module, this solution may not work, but if your module is contained inside a single file, and has no dependencies (does not make use of import), using the following pattern you can release your code as it is, and will be able to be imported with import (Browser ES6 Modules) and require (Node CommonJS Modules)

As a bonus, it will be suittable to be imported using a SCRIPT HTML Element.

main.js :

<pre><code>(function(){
 'use strict';
 const myModule = {
 helloWorld : function(){ console.log('Hello World!' )} 
 };

 // if running in NODE export module using NODEJS syntax
 if(typeof module !== 'undefined') module.exports = myModule ;
 // if running in Browser, set as a global variable.
 else window.myModule = myModule ;
})()
</code></pre>

my-module.js :

<pre><code> // import main.js (it will declare your Object in the global scope)
 import './main.js';
 // get a copy of your module object reference
 let _myModule = window.myModule;
 // delete the the reference from the global object
 delete window.myModule;
 // export it!
 export {_myModule as myModule};
</code></pre>

package.json :`

<pre><code> {
 "name" : "my-module", // set module name
 "main": "main.js", // set entry point
 /* ...other package.json stuff here */
 }
</code></pre>

<hr>

To use your module, you can now use the regular syntax ...

When imported in NODE ...

<pre><code> let myModule = require('my-module');
 myModule.helloWorld();
 // outputs 'Hello World!'
</code></pre>

When imported in BROWSER ...

<pre><code> import {myModule} from './my-module.js';
 myModule.helloWorld();
 // outputs 'Hello World!'
</code></pre>

Or even when included using an HTML Script Element...

<pre class="lang-html prettyprint-override"><code>&lt;script src="./main.js"&gt;&lt;/script&gt;
&lt;script&gt;
 myModule.helloWorld();
 // outputs 'Hello World!'
&lt;/script&gt;
</code></pre>

blocks|key|2705690|text|遵循何塞和马里乌斯的方法(2019年更新Babel的最新版本)：将最新的JavaScript文件保存在src目录中，并使用npm的prepublish脚本构建并输出到lib目录。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2705691|.npmignore|BOLD|2705692|/src|code-block|syntax|javascript|2705693|.gitignore|2705694|/lib
/node_modules|2705695|安装Babel+(在我的例子中是7.5.5版本)|2705696|$+npm+install+@babel/core+@babel/cli+@babel/preset-env+--save-dev|2705697|package.json|2705698|{
++"name":+"latest-js-to-npm",
++"version":+"1.0.0",
++"description":+"Keep+the+latest+JavaScript+files+in+a+src+directory+and+build+with+npm's+prepublish+script+and+output+to+the+lib+directory.",
++"main":+"lib/index.js",
++"scripts":+{
++++"prepublish":+"babel+src+-d+lib"
++},
++"keywords":+[],
++"author":+"",
++"license":+"ISC",
++"devDependencies":+{
++++"@babel/cli":+"%5E7.5.5",
++++"@babel/core":+"%5E7.5.5",
++++"@babel/preset-env":+"%5E7.5.5"
++},
++"babel":+{
++++"presets":+[
++++++"@babel/preset-env"
++++]
++}
}|2705699|我有src/index.js，它使用箭头函数：|2705700|"use+strict";

let+NewOneWithParameters+=+(a,+b)+=>+{
++console.log(a+%2B+b);+//+30
};
NewOneWithParameters(10,+20);|2705701|这是the+repo+on+GitHub。|2705702|现在你可以发布这个包了：|2705703|$+npm+publish
...
>+latest-js-to-npm@1.0.0+prepublish+.
>+babel+src+-d+lib

Successfully+compiled+1+file+with+Babel.
...|2705704|在将包发布到npm之前，您会看到已经生成了lib/index.js，并将其转换为es5：|2705705|"use+strict";

var+NewOneWithParameters+=+function+NewOneWithParameters(a,+b)+{
++console.log(a+%2B+b);+//+30
};

NewOneWithParameters(10,+20);|2705706|汇总捆绑包的更新|2705707|根据@kyw的提问，您将如何集成Rollup+bundler？|2705708|首先，安装rollup和rollup-plugin-babel|2705709|npm+install+-D+rollup+rollup-plugin-babel|2705710|其次，在项目根目录中创建rollup.config.js|2705711|import+babel+from+"rollup-plugin-babel";

export+default+{
++input:+"./src/index.js",
++output:+{
++++file:+"./lib/index.js",
++++format:+"cjs",
++++name:+"bundle"
++},
++plugins:+[
++++babel({
++++++exclude:+"node_modules/**"
++++})
++]
};|2705712|最后，在package.json中更新prepublish|2705713|{
++...
++"scripts":+{
++++"prepublish":+"rollup+-c"
++},
++...
}|2705714|现在您可以运行npm+publish了，在包发布到npm之前，您将看到lib/index.js已经生成，并被转换为es5：|2705715|'use+strict';

var+NewOneWithParameters+=+function+NewOneWithParameters(a,+b)+{
++console.log(a+%2B+b);+//+30
};

NewOneWithParameters(10,+20);|2705716|注意:顺便说一句，如果您使用的是汇总捆绑程序，则不再需要@babel/cli。您可以安全地卸载它：|2705717|npm+uninstall+@babel/cli|2705718|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/yucigou/latest-js-to-npm^0|1T|A|0|0|A|0|0|0|A|0|0|0|7|0|0|0|C|0|0|2|C|0|0|2|I|0|0|0|0|L|C|0|0|6|2|0|0|V|0|0|V|5|6|C|J|0|0|0|S|C|G|0|0|0|T|4|C|J|A|0|0|0|1P|7|B|0|0|0|1D|S|A|0|0^^$0|@$1|2|3|4|5|6|7|29|8|@$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2C|8|@$9|2D|A|2E|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|2F|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|2G|8|@$9|2H|A|2I|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|2J|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|2K|8|@$9|2L|A|2M|B|H]]|D|@]|E|$]]|$1|T|3|U|5|K|7|2N|8|@]|D|@]|E|$L|M]]|$1|V|3|W|5|6|7|2O|8|@$9|2P|A|2Q|B|H]]|D|@]|E|$]]|$1|X|3|Y|5|K|7|2R|8|@]|D|@]|E|$L|M]]|$1|Z|3|10|5|6|7|2S|8|@$9|2T|A|2U|B|C]]|D|@]|E|$]]|$1|11|3|12|5|K|7|2V|8|@]|D|@]|E|$L|M]]|$1|13|3|14|5|6|7|2W|8|@]|D|@$9|2X|A|2Y|1|2Z]]|E|$]]|$1|15|3|16|5|6|7|30|8|@]|D|@]|E|$]]|$1|17|3|18|5|K|7|31|8|@]|D|@]|E|$L|M]]|$1|19|3|1A|5|6|7|32|8|@$9|33|A|34|B|C]]|D|@]|E|$]]|$1|1B|3|1C|5|K|7|35|8|@]|D|@]|E|$L|M]]|$1|1D|3|1E|5|6|7|36|8|@$9|37|A|38|B|H]]|D|@]|E|$]]|$1|1F|3|1G|5|6|7|39|8|@$9|3A|A|3B|B|H]]|D|@]|E|$]]|$1|1H|3|1I|5|6|7|3C|8|@$9|3D|A|3E|B|H]|$9|3F|A|3G|B|C]|$9|3H|A|3I|B|C]]|D|@]|E|$]]|$1|1J|3|1K|5|K|7|3J|8|@]|D|@]|E|$L|M]]|$1|1L|3|1M|5|6|7|3K|8|@$9|3L|A|3M|B|H]|$9|3N|A|3O|B|C]]|D|@]|E|$]]|$1|1N|3|1O|5|K|7|3P|8|@]|D|@]|E|$L|M]]|$1|1P|3|1Q|5|6|7|3Q|8|@$9|3R|A|3S|B|H]|$9|3T|A|3U|B|C]|$9|3V|A|3W|B|C]]|D|@]|E|$]]|$1|1R|3|1S|5|K|7|3X|8|@]|D|@]|E|$L|M]]|$1|1T|3|1U|5|6|7|3Y|8|@$9|3Z|A|40|B|H]|$9|41|A|42|B|C]]|D|@]|E|$]]|$1|1V|3|1W|5|K|7|43|8|@]|D|@]|E|$L|M]]|$1|1X|3|1Y|5|6|7|44|8|@$9|45|A|46|B|H]|$9|47|A|48|B|C]]|D|@]|E|$]]|$1|1Z|3|20|5|K|7|49|8|@]|D|@]|E|$L|M]]|$1|21|3|-4|5|6|7|4A|8|@]|D|@]|E|$]]]|22|$23|$5|24|25|26|E|$27|28]]]]

Following José and Marius's approach, (with update of Babel's latest version in 2019): Keep the latest JavaScript files in a src directory, and build with npm's <code>prepublish</code> script and output to the lib directory.

.npmignore

<pre><code>/src
</code></pre>

.gitignore

<pre><code>/lib
/node_modules
</code></pre>

Install Babel (version 7.5.5 in my case)

<pre><code>$ npm install @babel/core @babel/cli @babel/preset-env --save-dev
</code></pre>

package.json

<pre><code>{
 "name": "latest-js-to-npm",
 "version": "1.0.0",
 "description": "Keep the latest JavaScript files in a src directory and build with npm's prepublish script and output to the lib directory.",
 "main": "lib/index.js",
 "scripts": {
 "prepublish": "babel src -d lib"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "@babel/cli": "^7.5.5",
 "@babel/core": "^7.5.5",
 "@babel/preset-env": "^7.5.5"
 },
 "babel": {
 "presets": [
 "@babel/preset-env"
 ]
 }
}
</code></pre>

And I have <code>src/index.js</code> which uses the arrow function:

<pre><code>"use strict";

let NewOneWithParameters = (a, b) =&gt; {
 console.log(a + b); // 30
};
NewOneWithParameters(10, 20);
</code></pre>

Here is <a href="https://github.com/yucigou/latest-js-to-npm" rel="noreferrer">the repo on GitHub</a>.

Now you can publish the package:

<pre><code>$ npm publish
...
&gt; latest-js-to-npm@1.0.0 prepublish .
&gt; babel src -d lib

Successfully compiled 1 file with Babel.
...
</code></pre>

Before the package is published to npm, you will see that <code>lib/index.js</code> has been generated, which is transpiled to es5:

<pre><code>"use strict";

var NewOneWithParameters = function NewOneWithParameters(a, b) {
 console.log(a + b); // 30
};

NewOneWithParameters(10, 20);
</code></pre>

[Update for Rollup bundler]

As asked by @kyw, how would you integrate Rollup bundler?

First, install <code>rollup</code> and <code>rollup-plugin-babel</code>

<pre><code>npm install -D rollup rollup-plugin-babel
</code></pre>

Second, create <code>rollup.config.js</code> in the project root directory

<pre><code>import babel from "rollup-plugin-babel";

export default {
 input: "./src/index.js",
 output: {
 file: "./lib/index.js",
 format: "cjs",
 name: "bundle"
 },
 plugins: [
 babel({
 exclude: "node_modules/**"
 })
 ]
};
</code></pre>

Lastly, update <code>prepublish</code> in <code>package.json</code>

<pre><code>{
 ...
 "scripts": {
 "prepublish": "rollup -c"
 },
 ...
}
</code></pre>

Now you can run <code>npm publish</code>, and before the package is published to npm, you will see that lib/index.js has been generated, which is transpiled to es5:

<pre><code>'use strict';

var NewOneWithParameters = function NewOneWithParameters(a, b) {
 console.log(a + b); // 30
};

NewOneWithParameters(10, 20);
</code></pre>

Note: by the way, you no longer need <code>@babel/cli</code> if you are using the Rollup bundler. You can safely uninstall it:

<pre><code>npm uninstall @babel/cli
</code></pre>

blocks|key|2918435|text|Node.js+13.2.0%2B支持不带实验标志的ESM，有几个选项可以发布混合(ESM和CommonJS)+NPM包(取决于所需的向后兼容性级别)：https://2ality.com/2019/10/hybrid-npm-packages.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2918436|我建议使用完全向后兼容的方式，以使您的包更容易使用。这可能如下所示：|2918437|混合包包含以下文件：|2918438|mypkg/
++package.json
++esm/
++++entry.js
++commonjs/
++++package.json
++++entry.js|code-block|syntax|javascript|2918439|mypkg/package.json|style|CODE|2918440|{
++"type":+"module",
++"main":+"./commonjs/entry.js",
++"exports":+{
++++"./esm":+"./esm/entry.js"
++},
++"module":+"./esm/entry.js",
++···
}

mypkg/commonjs/package.json

{
++"type":+"commonjs"
}|2918441|从CommonJS导入：|2918442|const+{x}+=+require('mypkg');|2918443|从ESM导入：|2918444|import+{x}+from+'mypkg/esm';|2918445|我们做了一个investigation+into+ESM+support+in+05.2019，发现很多库都缺乏支持(因此建议向后兼容)：|2918446|2918447|esm包的支持与Node的不一致，这导致了内置要求不能旁载.mjs文件的问题。如果开发人员想要互操作或易用性，.mjs文件扩展名https://github.com/standard-things/esm/issues/498#issuecomment-403496745|unordered-list-item|2918448|"The不应该是https://github.com/standard-things/esm#loading，Node.mjs文件扩展名。它是可用的，因为它是实验性的模块，但由于它还没有完全烘焙，我不能承诺对它进行任何增强。|2918449|2918450|​|2918451|2918452|mocha+doesn't+have+native+support+for+.mjs+files+|2918453|更新2020-01-13:+Mocha在mocha@7.0.0-esm1|2918454|2918455|中发布了实验性支持|2918456|2918457|2918458|create-react-app|2918459|react-apollo|2918460|graphql-js|2918461|inferno|2918462|：|2918463|许多备受瞩目的项目都有.mjs文件的问题|2918464|2918465|2918466|entityMap|0|LINK|mutability|MUTABLE|url|https://2ality.com/2019/10/hybrid-npm-packages.html|1|https://github.com/c-hive/guides/blob/34415f7f9a4cedcc38f4faef1b0a9c66ee913b39/js/package.md#esm|2|https://github.com/standard-things/esm|3|https://github.com/standard-things/esm/issues/498#issuecomment-403496745|4|https://github.com/standard-things/esm#loading|5|https://github.com/mochajs/mocha/issues/3006|6|https://github.com/facebook/create-react-app/pull/4085|7|https://github.com/apollographql/react-apollo/issues/1737|8|https://github.com/graphql/graphql-js/issues/1272|9|https://github.com/infernojs/inferno/issues/1296^0|22|1F|0|0|0|0|0|0|I|0|0|0|0|0|0|6|15|1|0|0|0|3|2|1S|20|3|0|8|1A|4|0|0|0|0|12|4|0|1C|5|1|K|G|1|0|0|0|0|0|G|6|0|0|C|7|0|0|A|8|0|0|7|9|0|0|B|4|0|0|0^^$0|@$1|2|3|4|5|6|7|2P|8|@]|9|@$A|2Q|B|2R|1|2S]]|C|$]]|$1|D|3|E|5|6|7|2T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|2U|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|2V|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|2W|8|@$A|2X|B|2Y|O|P]]|9|@]|C|$]]|$1|Q|3|R|5|J|7|2Z|8|@]|9|@]|C|$K|L]]|$1|S|3|T|5|6|7|30|8|@]|9|@]|C|$]]|$1|U|3|V|5|J|7|31|8|@]|9|@]|C|$K|L]]|$1|W|3|X|5|6|7|32|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|J|7|33|8|@]|9|@]|C|$K|L]]|$1|10|3|11|5|6|7|34|8|@]|9|@$A|35|B|36|1|37]]|C|$]]|$1|12|3|-4|5|6|7|38|8|@]|9|@]|C|$]]|$1|13|3|14|5|15|7|39|8|@]|9|@$A|3A|B|3B|1|3C]|$A|3D|B|3E|1|3F]]|C|$]]|$1|16|3|17|5|15|7|3G|8|@]|9|@$A|3H|B|3I|1|3J]]|C|$]]|$1|18|3|-4|5|6|7|3K|8|@]|9|@]|C|$]]|$1|19|3|1A|5|6|7|3L|8|@]|9|@]|C|$]]|$1|1B|3|-4|5|6|7|3M|8|@]|9|@]|C|$]]|$1|1C|3|1D|5|15|7|3N|8|@$A|3O|B|3P|O|P]]|9|@$A|3Q|B|3R|1|3S]]|C|$]]|$1|1E|3|1F|5|15|7|3T|8|@$A|3U|B|3V|O|P]]|9|@]|C|$]]|$1|1G|3|-4|5|6|7|3W|8|@]|9|@]|C|$]]|$1|1H|3|1I|5|6|7|3X|8|@]|9|@]|C|$]]|$1|1J|3|1A|5|6|7|3Y|8|@]|9|@]|C|$]]|$1|1K|3|-4|5|6|7|3Z|8|@]|9|@]|C|$]]|$1|1L|3|1M|5|15|7|40|8|@]|9|@$A|41|B|42|1|43]]|C|$]]|$1|1N|3|1O|5|15|7|44|8|@]|9|@$A|45|B|46|1|47]]|C|$]]|$1|1P|3|1Q|5|15|7|48|8|@]|9|@$A|49|B|4A|1|4B]]|C|$]]|$1|1R|3|1S|5|15|7|4C|8|@]|9|@$A|4D|B|4E|1|4F]]|C|$]]|$1|1T|3|1U|5|6|7|4G|8|@]|9|@]|C|$]]|$1|1V|3|1W|5|15|7|4H|8|@$A|4I|B|4J|O|P]]|9|@]|C|$]]|$1|1X|3|-4|5|6|7|4K|8|@]|9|@]|C|$]]|$1|1Y|3|1A|5|6|7|4L|8|@]|9|@]|C|$]]|$1|1Z|3|-4|5|6|7|4M|8|@]|9|@]|C|$]]]|20|$21|$5|22|23|24|C|$25|26]]|27|$5|22|23|24|C|$25|28]]|29|$5|22|23|24|C|$25|2A]]|2B|$5|22|23|24|C|$25|2C]]|2D|$5|22|23|24|C|$25|2E]]|2F|$5|22|23|24|C|$25|2G]]|2H|$5|22|23|24|C|$25|2I]]|2J|$5|22|23|24|C|$25|2K]]|2L|$5|22|23|24|C|$25|2M]]|2N|$5|22|23|24|C|$25|2O]]]]

Node.js 13.2.0+ supports ESM without the experimental flag and there're a few options to publish hybrid (ESM and CommonJS) NPM packages (depending on the level of backward compatibility needed): <a href="https://2ality.com/2019/10/hybrid-npm-packages.html" rel="noreferrer">https://2ality.com/2019/10/hybrid-npm-packages.html</a>

I recommend going the full backward compatibility way to make the usage of your package easier. This could look as follows:

The hybrid package has the following files:

<pre><code>mypkg/
 package.json
 esm/
 entry.js
 commonjs/
 package.json
 entry.js
</code></pre>

<code>mypkg/package.json</code>

<pre><code>{
 "type": "module",
 "main": "./commonjs/entry.js",
 "exports": {
 "./esm": "./esm/entry.js"
 },
 "module": "./esm/entry.js",
 ···
}

mypkg/commonjs/package.json

{
 "type": "commonjs"
}
</code></pre>

Importing from CommonJS:

<pre><code>const {x} = require('mypkg');
</code></pre>

Importing from ESM:

<pre><code>import {x} from 'mypkg/esm';
</code></pre>

We did an <a href="https://github.com/c-hive/guides/blob/34415f7f9a4cedcc38f4faef1b0a9c66ee913b39/js/package.md#esm" rel="noreferrer">investigation into ESM support in 05.2019</a> and found that a lot of libraries were lacking support (hence the recommendation for backward compatibility):

<ul>
<li><a href="https://github.com/standard-things/esm" rel="noreferrer">esm</a> package's support doesn't align with Node's which causes issues

<ul>
<li>"Builtin require cannot sideload .mjs files." <a href="https://github.com/standard-things/esm#loading" rel="noreferrer">https://github.com/standard-things/esm#loading</a>, <a href="https://github.com/standard-things/esm/issues/498#issuecomment-403496745" rel="noreferrer">https://github.com/standard-things/esm/issues/498#issuecomment-403496745</a></li>
<li>"The .mjs file extension should not be the thing developers reach for if they want interop or ease of use. It's available since it's in --experimental-modules but since it's not fully baked I can't commit to any enhancements to it." <a href="https://github.com/standard-things/esm/issues/498#issuecomment-403655466" rel="noreferrer">https://github.com/standard-things/esm/issues/498#issuecomment-403655466</a></li>
</ul></li>
<li><a href="https://github.com/mochajs/mocha/issues/3006" rel="noreferrer">mocha doesn't have native support for <code>.mjs</code> files</a>

<ul>
<li>Update 2020-01-13: Mocha released experimental support in <code>mocha@7.0.0-esm1</code></li>
</ul></li>
<li>Many high-profile projects had issues with <code>.mjs</code> files:

<ul>
<li><a href="https://github.com/facebook/create-react-app/pull/4085" rel="noreferrer">create-react-app</a></li>
<li><a href="https://github.com/apollographql/react-apollo/issues/1737" rel="noreferrer">react-apollo</a></li>
<li><a href="https://github.com/graphql/graphql-js/issues/1272" rel="noreferrer">graphql-js</a></li>
<li><a href="https://github.com/infernojs/inferno/issues/1296" rel="noreferrer">inferno</a></li>
</ul></li>
</ul>

I was about to publish a module to NPM, when I thought about rewriting it in ES6, to both future-proof it, and learn ES6. I've used Babel to transpile to ES5, and run tests. But I'm not sure how to proceed:

<ol>
<li>Do I transpile, and publish the resulting /out folder to NPM?</li>
<li>Do I include the result folder in my Github repo?</li>
<li>Or do I maintain 2 repos, one with the ES6 code + gulp script for Github, and one with the transpiled results + tests for NPM?</li>
</ol>

In short: what steps do I need to take to publish a module written in ES6 to NPM, while still allowing people to browse/fork the original code?

How to publish a module written in ES6 to NPM?

我正要把一个模块发布到NPM，这时我想用ES6重写它，既要面向未来，又要学习ES6。我已经使用Babel转换成ES5，并运行测试。但我不确定该怎么做：我是否要转换生成的/out文件夹并将其发布到NPM？我是否要在Github存储库中包含result文件夹？还是要维护两个存储库，一个包含针对Github的ES6代码+ g...

问如何将ES6编写的模块发布到NPM？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将ES6编写的模块发布到NPM？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将ES6编写的模块发布到NPM？
EN