Ich wollte gerade ein Modul für NPM veröffentlichen, als ich darüber nachdachte, es in ES6 neu zu schreiben, um es zukunftssicher zu machen und ES6 zu lernen. Ich habe Babel verwendet, um auf ES5 zu transpilieren und Tests durchzuführen. Aber ich bin mir nicht sicher, wie ich vorgehen soll:

1. Transpiliere und veröffentliche ich den resultierenden / out-Ordner in NPM?
2. Füge ich den Ergebnisordner in mein Github-Repo ein?
3. Oder pflege ich 2 Repos, eines mit dem ES6-Code + Gulp-Skript für Github und eines mit den transpilierten Ergebnissen + Tests für NPM?

Kurz gesagt: Welche Schritte muss ich unternehmen, um ein in ES6 geschriebenes Modul in NPM zu veröffentlichen und gleichzeitig den Benutzern das Durchsuchen / Verzweigen des Originalcodes zu ermöglichen?

Das Muster, das ich bisher gesehen habe, besteht darin, die es6-Dateien in einem srcVerzeichnis zu speichern und Ihre Daten in der Vorveröffentlichung von npm im Verzeichnis zu erstellen lib.

Sie benötigen eine .npmignore-Datei, ähnlich wie .gitignore, aber ignoriert srcstatt lib.

Ich mag Josés Antwort. Ich habe bereits festgestellt, dass mehrere Module diesem Muster folgen. So können Sie es einfach mit Babel6 implementieren. Ich installiere babel-clilokal, damit der Build nicht kaputt geht, wenn ich jemals meine globale Babel-Version ändere.

.npmignore

/src/

.gitignore

/lib/
/node_modules/

Installieren Sie Babel

npm install --save-dev babel-core babel-cli babel-preset-es2015

package.json

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

TL; DR - Nicht bis ~ Oktober 2019. Das Node.js Modules Team hat gefragt :

Bitte veröffentlichen Sie keine ES-Modulpakete, die von Node.js verwendet werden sollen, bis [Oktober 2019]

2019 Mai Update

Seit 2015, als diese Frage gestellt wurde, ist die JavaScript-Unterstützung für Module erheblich ausgereift und wird hoffentlich im Oktober 2019 offiziell stabil sein. Alle anderen Antworten sind jetzt veraltet oder übermäßig kompliziert. Hier ist die aktuelle Situation und Best Practice.

ES6-Unterstützung

99% von ES6 (auch bekannt als 2015) wird seit Version 6 von Node unterstützt . Die aktuelle Version von Node ist 12. Alle immergrünen Browser unterstützen die überwiegende Mehrheit der ES6-Funktionen. ECMAScript ist jetzt in der Version 2019 und das Versionsschema bevorzugt jetzt die Verwendung von Jahren.

ES-Module (auch bekannt als ECMAScript-Module) in Browsern

Alle immergrün Browser wurden unterstützt import -ing ES6 Module seit 2017. Dynamische Importe werden unterstützt von Chrome (+ Gabeln wie Opera und Samsung Internet) und Safari. Die Firefox-Unterstützung ist für die nächste Version 67 vorgesehen.

Sie benötigen kein Webpack / Rollup / Paket usw. mehr, um Module zu laden. Sie können für andere Zwecke noch nützlich sein, müssen jedoch nicht Ihren Code laden. Sie können URLs direkt importieren, die auf den Code des ES-Moduls verweisen.

ES-Module im Knoten

ES-Module ( .mjsDateien mit import/ export) werden seit Node v8.5.0 durch Aufrufen nodemit dem --experimental-modulesFlag unterstützt. Node v12, veröffentlicht im April 2019, hat die Unterstützung für experimentelle Module neu geschrieben. Die sichtbarste Änderung ist, dass die Dateierweiterung beim Import standardmäßig angegeben werden muss:

// lib.mjs 

export const hello = 'Hello world!';

// index.mjs:

import { hello } from './lib.mjs';
console.log(hello);

Beachten Sie die obligatorischen .mjsErweiterungen. Rennen wie:

node --experimental-modules index.mjs

Die Node 12-Version wurde auch veröffentlicht, als das Modules-Team die Entwickler aufforderte , keine ES-Modulpakete zu veröffentlichen, die für die Verwendung durch Node.js vorgesehen sind, bis eine Lösung für die Verwendung von Paketen über require('pkg')und gefunden wurde import 'pkg'. Sie können weiterhin native ES-Module veröffentlichen, die für Browser bestimmt sind.

Ökosystemunterstützung nativer ES-Module

Ab Mai 2019 ist die Ökosystemunterstützung für ES-Module noch nicht ausgereift. Beispielsweise werden Test-Frameworks wie Jest und Ava nicht unterstützt --experimental-modules. Sie müssen einen Transpiler verwenden und sich dann zwischen der benannten import ( import { symbol }) -Syntax (die mit den meisten npm-Paketen noch nicht funktioniert) und der Standardimportsyntax ( import Package from 'package') entscheiden, die funktioniert, aber nicht, wenn Babel sie analysiert Für in TypeScript erstellte Pakete (Graphql-Tools, Node-Influx, Faast usw.) gibt es jedoch eine Problemumgehung, die sowohl mit --experimental-modulesals auch mit Babel funktioniert, wenn Babel Ihren Code transpiliert, sodass Sie ihn mit Jest / Ava / Mocha usw. testen können:

import * as ApolloServerM from 'apollo-server'; const ApolloServer = ApolloServerM.default || ApolloServerM;

Wohl hässlich, aber auf diese Weise können Sie Ihren eigenen ES-Modulcode mit import/ schreiben exportund ihn node --experimental-modulesohne Transpiler ausführen . Wenn Sie Abhängigkeiten haben, die noch nicht ESM-fähig sind, importieren Sie sie wie oben beschrieben, und Sie können Testframeworks und andere Tools über Babel verwenden.

Vorherige Antwort auf die Frage - denken Sie daran, tun Sie dies erst, wenn Node das Erfordernis / Import-Problem gelöst hat, hoffentlich um Oktober 2019.

Veröffentlichen von ES6-Modulen in npm mit Abwärtskompatibilität

Um ein ES-Modul auf npmjs.org zu veröffentlichen, damit es ohne Babel oder andere Transpiler direkt importiert werden kann, zeigen Sie einfach das mainFeld in Ihrem package.jsonauf die .mjsDatei, lassen Sie jedoch die Erweiterung weg :

{
  "name": "mjs-example",
  "main": "index"
}

Das ist die einzige Änderung. Wenn Sie die Erweiterung weglassen, sucht Node zuerst nach einer mjs-Datei, wenn sie mit --experimental-modules ausgeführt wird. Andernfalls wird auf die .js-Datei zurückgegriffen, sodass Ihr vorhandener Transpilationsprozess zur Unterstützung älterer Node-Versionen wie zuvor funktioniert. Stellen Sie einfach sicher, dass Babel auf die .mjsDatei (en) verweist .

Hier ist die Quelle für ein natives ES-Modul mit Abwärtskompatibilität für Knoten <8.5.0 , das ich in NPM veröffentlicht habe. Sie können es jetzt verwenden, ohne Babel oder irgendetwas anderes.

Installieren Sie das Modul:

npm install local-iso-dt
# or, yarn add local-iso-dt

Erstellen Sie eine Testdatei test.mjs :

import { localISOdt } from 'local-iso-dt/index.mjs';
console.log(localISOdt(), 'Starting job...');

Führen Sie den Knoten (v8.5.0 +) mit dem Flag --experimental-modules aus:

node --experimental-modules test.mjs

Typoskript

Wenn Sie in TypeScript entwickeln, können Sie ES6-Code generieren und ES6-Module verwenden:

tsc index.js --target es6 --modules es2015

Dann müssen Sie die *.jsAusgabe in umbenennen .mjs, ein bekanntes Problem , das hoffentlich bald behoben wird, damit Dateien direkt tscausgegeben .mjswerden können.

@ Jose ist richtig. Es ist nichts Falsches daran, ES6 / ES2015 in NPM zu veröffentlichen, aber das kann zu Problemen führen, insbesondere wenn die Person, die Ihr Paket verwendet, beispielsweise Webpack verwendet, da normalerweise Benutzer den node_modulesOrdner während der Vorverarbeitung babelaus Leistungsgründen ignorieren .

Also, einfach zu verwenden gulp, gruntoder einfach Node.js einen bauen libOrdner, ES5 ist.

Hier ist mein build-lib.jsSkript, in dem ich mich behalte ./tools/(nein gulpoder grunthier):

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));

Hier ein letzter Rat: Sie müssen Ihrem Projekt einen .npmignore hinzufügen . Wenn npm publishdiese Datei nicht gefunden wird, wird sie .gitignorestattdessen verwendet, was zu Problemen führt, da Ihre .gitignoreDatei normalerweise ausgeschlossen ./libund eingeschlossen wird. Dies ./srcist genau das Gegenteil von dem, was Sie beim Veröffentlichen in NPM wünschen. Die .npmignoreDatei hat grundsätzlich die gleiche Syntax wie .gitignore(AFAIK).

Folgen Sie dem Ansatz von José und Marius (mit Aktualisierung der neuesten Version von Babel im Jahr 2019): Bewahren Sie die neuesten JavaScript-Dateien in einem src-Verzeichnis auf und erstellen Sie sie mit dem prepublishSkript von npm und geben Sie sie in das lib-Verzeichnis aus.

.npmignore

/src

.gitignore

/lib
/node_modules

Installieren Sie Babel (in meinem Fall Version 7.5.5)

$ npm install @babel/core @babel/cli @babel/preset-env --save-dev

package.json

{
  "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"
    ]
  }
}

Und ich habe src/index.jswelche die Pfeilfunktion benutzt:

"use strict";

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

Hier ist das Repo auf GitHub .

Jetzt können Sie das Paket veröffentlichen:

$ npm publish
...
> latest-js-to-npm@1.0.0 prepublish .
> babel src -d lib

Successfully compiled 1 file with Babel.
...

Bevor das Paket auf npm veröffentlicht wird, sehen Sie, dass lib/index.jses generiert wurde, das in es5 transpiliert wird:

"use strict";

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

NewOneWithParameters(10, 20);

[Update für Rollup-Bundler]

Wie würden Sie den Rollup-Bundler integrieren, wie von @kyw gefragt?

Zuerst installieren rollupundrollup-plugin-babel

npm install -D rollup rollup-plugin-babel

Zweitens erstellen Sie rollup.config.jsim Projektstammverzeichnis

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/**"
    })
  ]
};

Zuletzt aktualisieren prepublishinpackage.json

{
  ...
  "scripts": {
    "prepublish": "rollup -c"
  },
  ...
}

Jetzt können Sie ausführen npm publishund bevor das Paket auf npm veröffentlicht wird, werden Sie sehen, dass lib / index.js generiert wurde, das in es5 transpiliert wird:

'use strict';

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

NewOneWithParameters(10, 20);

Hinweis: @babel/cliÜbrigens brauchen Sie nicht mehr, wenn Sie den Rollup-Bundler verwenden. Sie können es sicher deinstallieren:

npm uninstall @babel/cli

Wenn Sie dies in einem sehr einfachen kleinen Open-Source-Knotenmodul in Aktion sehen möchten, schauen Sie sich den n-ten Tag an (den ich gestartet habe - auch andere Mitwirkende). Schauen Sie in die Datei package.json und in den vorveröffentlichten Schritt, der Sie dahin führt, wo und wie Sie dies tun. Wenn Sie dieses Modul klonen, können Sie es lokal ausführen und als Vorlage für Sie verwenden.

Node.js 13.2.0+ unterstützt ESM ohne das experimentelle Flag und es gibt einige Optionen zum Veröffentlichen von Hybrid-NPM-Paketen (ESM und CommonJS) (abhängig von der erforderlichen Abwärtskompatibilität): https://2ality.com/2019 /10/hybrid-npm-packages.html

Ich empfehle die vollständige Abwärtskompatibilität, um die Verwendung Ihres Pakets zu vereinfachen. Dies könnte wie folgt aussehen:

Das Hybridpaket enthält die folgenden Dateien:

mypkg/
  package.json
  esm/
    entry.js
  commonjs/
    package.json
    entry.js

mypkg/package.json

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

mypkg/commonjs/package.json

{
  "type": "commonjs"
}

Importieren aus CommonJS:

const {x} = require('mypkg');

Importieren aus ESM:

import {x} from 'mypkg/esm';

Wir haben im Jahr 05.2019 eine Untersuchung zur ESM-Unterstützung durchgeführt und festgestellt, dass vielen Bibliotheken die Unterstützung fehlt (daher die Empfehlung für die Abwärtskompatibilität):

• Die Unterstützung des esm- Pakets stimmt nicht mit der des Knotens überein , was zu Problemen führt
  • "Builtin erfordert, dass .mjs-Dateien nicht von der Seite geladen werden können." https://github.com/standard-things/esm#loading , https://github.com/standard-things/esm/issues/498#issuecomment-403496745
  • "Die Dateierweiterung .mjs sollte nicht das sein, wonach Entwickler greifen, wenn sie Interop oder Benutzerfreundlichkeit wünschen. Sie ist verfügbar, da sie in --experimental-Modulen enthalten ist, aber da sie nicht vollständig gebacken ist, kann ich keine Verbesserungen vornehmen. "" https://github.com/standard-things/esm/issues/498#issuecomment-403655466
• Mokka hat keine native Unterstützung für .mjsDateien
  • Update 2020-01-13: Mocha hat experimentelle Unterstützung in veröffentlicht mocha@7.0.0-esm1
• Viele hochkarätige Projekte hatten Probleme mit .mjsDateien:
  • create-react-app
  • React-Apollo
  • graphql-js
  • Inferno

Die beiden Kriterien eines NPM-Pakets sind, dass es nur mit a verwendet werden kann require( 'package' )und etwas Software-artiges tut.

Wenn Sie diese beiden Anforderungen erfüllen, können Sie tun, was Sie wollen. Selbst wenn das Modul in ES6 geschrieben ist und der Endbenutzer das nicht wissen muss, würde ich es vorerst transpilieren, um maximale Unterstützung zu erhalten.

Wenn Ihr Modul jedoch wie Koa Kompatibilität mit Benutzern erfordert, die ES6-Funktionen verwenden, ist die Lösung mit zwei Paketen möglicherweise die bessere Idee.

Wegbringen

1. Veröffentlichen Sie nur so viel Code, wie Sie zum require( 'your-package' )Arbeiten benötigen .
2. Veröffentlichen Sie nur 1 Paket, es sei denn, der Wert zwischen ES5 und 6 ist für den Benutzer von Bedeutung. Transpile es, wenn du musst.

Der Hauptschlüssel package.jsonentscheidet über den Einstiegspunkt in das Paket, sobald es veröffentlicht ist. So können Sie die Ausgabe Ihres Babel platzieren, wo immer Sie möchten, und müssen nur den richtigen Pfad in der mainTaste angeben.

"main": "./lib/index.js",

Hier ist ein gut geschriebener Artikel zum Veröffentlichen eines npm-Pakets

https://codeburst.io/publish-your-own-npm-package-ff918698d450

Hier ist ein Beispiel-Repo, das Sie als Referenz verwenden können

https://github.com/flexdinesh/npm-module-boilerplate

Abhängig von der Anatomie Ihres Moduls funktioniert diese Lösung möglicherweise nicht. Wenn Ihr Modul jedoch in einer einzelnen Datei enthalten ist und keine Abhängigkeiten aufweist (kein Import verwendet wird ), können Sie Ihren Code mithilfe des folgenden Musters so wie er ist freigeben und können mit Import importiert werden (Browser ES6-Module) und erfordern (Node CommonJS-Module)

Als Bonus ist es geeignet, mit einem SCRIPT-HTML-Element importiert zu werden.

main.js :

(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 ;
})()

my-module.js :

    // 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};

package.json : `

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

Um Ihr Modul zu verwenden, können Sie jetzt die reguläre Syntax verwenden ...

Beim Import in NODE ...

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

Beim Import in BROWSER ...

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

Oder auch wenn es mit einem HTML-Skriptelement enthalten ist ...

<script src="./main.js"></script>
<script>
     myModule.helloWorld();
    // outputs 'Hello World!'
</script>

Ein paar zusätzliche Hinweise für alle, die eigene Module direkt von Github verwenden und keine veröffentlichten Module durchgehen :

Der ( weit verbreitete ) "Prepublish" -Haken tut nichts für Sie.

Das Beste, was man tun kann (wenn man sich auf Github-Repos verlassen will, nicht auf veröffentlichte Sachen):

• Liste srcvon .npmignore aufheben (mit anderen Worten: zulassen). Wenn Sie keine haben .npmignore, denken Sie daran: Eine Kopie von .gitignorewird stattdessen am installierten Speicherort verwendet, wie ls node_modules/yourProjectSie sehen werden.
• babel-cliStellen Sie sicher, dass es sich um eine Abhängigkeit in Ihrem Modul handelt, nicht nur um eine devDepenceny, da Sie tatsächlich auf der konsumierenden Maschine aufbauen, die auch auf dem Computer des App-Entwicklers bekannt ist, der Ihr Modul verwendet

• Mach das Build-Ding im Installations-Hook, dh:

  "install": "babel src -d lib -s"

(kein Mehrwert beim Versuch einer "Vorinstallation", dh babel-cli fehlt möglicherweise)