Bir modülü ESM'de yeniden yazmayı düşündüğümde, hem geleceğe hem de ES6'yı öğrenmek için bir modül yayınlamak üzereydim. Babil'i ES5'e aktarmak ve testler yapmak için kullandım. Ama nasıl ilerleyeceğimden emin değilim:

1. Elde edilen / çıkan klasörü NPM'ye aktarıp yayınlayabilir miyim?
2. Sonuç klasörünü Github deposuma ekleyebilir miyim?
3. Ya da biri Github için ES6 kod + gulp komut dosyasıyla ve diğeri de NPM için aktarılan sonuçlarla + testlerle 2 depo tutuyor muyum?

Kısacası, insanların orijinal koda göz atmalarına / çatallamalarına izin verirken ES6'da yazılmış bir modülü NPM'ye yayınlamak için hangi adımları atmam gerekir?

Şimdiye kadar gördüğüm desen, es6 dosyalarını bir srcdizinde tutmak ve eşyalarınızı npm'in dizine önceden yayınlanmasıyla oluşturmaktır lib.

.Gitignore dosyasına benzer ancak srcbunun yerine yoksayılan bir .npmignore dosyasına ihtiyacınız olacaktır lib.

José'nin cevabını seviyorum. Zaten bu modeli takip eden birkaç modül fark ettim. Babel6 ile kolayca nasıl uygulayabileceğiniz aşağıda açıklanmıştır. Ben yüklemek babel-clişimdiye kadar küresel babel sürümü değiştirirseniz inşa sonu yok bu yüzden lokal olarak.

.npmignore

/src/

.gitignore

/lib/
/node_modules/

Babel'i yükle

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 - Yapma, ~ Ekim 2019 tarihine kadar. Node.js Modüller Ekibi şunları sordu :

Lütfen [Ekim 2019] tarihine kadar Node.js tarafından kullanılması amaçlanan ES modül paketlerini yayınlamayın

2019 Mayıs güncelleme

Bu sorunun sorulduğu 2015'ten bu yana, modüller için JavaScript desteği önemli ölçüde olgunlaştı ve umarım Ekim 2019'da resmi olarak kararlı olacak. Diğer tüm cevaplar artık eski veya aşırı derecede karmaşık. İşte mevcut durum ve en iyi uygulama.

ES6 desteği

ES6'nın% 99'u (aka 2015) Düğüm tarafından sürüm 6'dan beri desteklenmektedir . Düğümün şu anki sürümü 12'dir. Tüm yaprak dökmeyen tarayıcılar ES6 özelliklerinin büyük çoğunluğunu destekler. ECMAScript şimdi 2019 sürümündedir ve sürüm düzeni artık yılların kullanılmasını desteklemektedir.

Tarayıcılarda ES Modülleri (diğer adıyla ECMAScript modülleri)

Tüm dökmeyen tarayıcılar edilmiştir destekleyen import 2017 yılından bu yana -ing ES6 modüllerini Dinamik ithalatı vardır desteklenen Chrome tarafından ve Safari (Opera ve Samsung internet gibi + çatal). Bir sonraki sürüm olan 67 için Firefox desteği destekleniyor.

Artık gerek yük modülleri WebPack / toplaması / Parsel vb. Yine de başka amaçlar için yararlı olabilirler, ancak kodunuzu yüklemeniz gerekmez. ES modülleri kodunu gösteren URL'leri doğrudan içe aktarabilirsiniz.

Düğümdeki ES modülleri

ES modülleri ( .mjsile dosyaları import/ ' export) arayarak Düğüm v8.5.0 beri destekleniyor nodeile --experimental-modulesbayrak. Nisan 2019'da yayınlanan düğüm v12, deneysel modül desteğini yeniden yazdı. En görünür değişiklik, içe aktarma sırasında dosya uzantısının varsayılan olarak belirtilmesi gerektiğidir:

// lib.mjs 

export const hello = 'Hello world!';

// index.mjs:

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

.mjsBoyunca zorunlu uzantılara dikkat edin. Olarak çalıştırmak:

node --experimental-modules index.mjs

Düğüm 12 sürümü aynı zamanda Modüller Ekibi , geliştiricilerin hem ve aracılığıyla paketleri kullanmak için bir çözüm bulunana kadar Node.js tarafından kullanılması amaçlanan ES modül paketlerini yayınlamamasını istediğinde gerçekleşir . Tarayıcılar için tasarlanmış yerel ES modüllerini yine de yayınlayabilirsiniz.require('pkg')import 'pkg'

Yerel ES modüllerinin ekosistem desteği

Mayıs 2019'dan itibaren ES Modülleri için ekosistem desteği olgunlaşmamış durumda. Örneğin, Jest ve Ava gibi test çerçeveleri desteklemiyor --experimental-modules. Bir transpiler kullanmanız gerekir ve daha sonra adlandırılmış import ( import { symbol }) sözdizimini (henüz çoğu npm paketiyle çalışmaz) ve çalışan varsayılan içe aktarım sözdizimi ( import Package from 'package') ile Babel ayrıştırdığında kullanılamaz. TypeScript'te yazılmış paketler için (graphql-tools, node-flux, faast vb.) --experimental-modulesBabil kodunuzu aktarır ve Jest / Ava / Mocha vb. ile test edebilmeniz için çalışır.

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

Tartışmasız çirkin, ama bu şekilde kendi ES modülleri kodunu import/ ile yazabilir exportve node --experimental-modulestranspiller olmadan çalıştırabilirsiniz. Henüz ESM'ye hazır olmayan bağımlılıklarınız varsa, bunları yukarıdaki gibi içe aktarın ve Babel aracılığıyla test çerçevelerini ve diğer araçları kullanabilirsiniz.

Sorunun önceki cevabı - Unutmayın, Node Ekim 2019 civarında, ihtiyaç / içe aktarma sorununu çözene kadar bunu yapmayın.

ES6 modüllerini geriye dönük uyumlulukla npm'de yayınlama

O Babel veya diğer transpilers olmadan doğrudan alınabilir, böylece npmjs.org bir ES modülünü yayımlamak için, sadece işaret mainsenin alanına package.jsongöre .mjsdosyanın, ancak uzantısını ihmal:

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

Tek değişiklik bu. Uzantıyı atlayarak, Düğüm --experimental-modules ile çalıştırılırsa önce bir mjs dosyası arar. Aksi takdirde .js dosyasına geri döner, bu nedenle eski Düğüm sürümlerini desteklemek için mevcut transpilasyon işleminiz daha önce olduğu gibi çalışır - Babel'i dosyalara yönlendirdiğinizden emin olun .mjs.

İşte Düğüm <8.5.0 için geriye dönük uyumluluk ile bir yerli ES modülü için kaynak ben NPM yayınlanır ki. Babil veya başka bir şey olmadan hemen kullanabilirsiniz.

Modülü takın:

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

Bir test dosyası test.mjs oluşturun :

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

Düğümü (v8.5.0 +) - deneysel modüller bayrağıyla çalıştırın:

node --experimental-modules test.mjs

daktilo ile yazılmış yazı

TypeScript'te geliştirirseniz, ES6 kodu oluşturabilir ve ES6 modüllerini kullanabilirsiniz:

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

Sonra, yeniden adlandırmak gerekir *.jsçıktı .mjs, bilinen bir sorunu umarım çok yakında sabit alacak tsckutu çıktı .mjsdoğrudan dosyaları.

@Jose haklı. ES6 / ES2015'i NPM'ye yayınlamakla ilgili yanlış bir şey yoktur, ancak özellikle paketinizi kullanan kişi Webpack kullanıyorsa, sorun yaratabilir, çünkü normalde insanlar performans nedenleriyle node_modulesön işlem yaparken klasörü görmezden gelir babel.

Yani, sadece kullanmak gulp, gruntbir inşa etmek basitçe node.js veya libES5 olduğu klasörü.

İşte içinde tuttuğum build-lib.jssenaryom ./tools/(hayır gulpveya gruntburada):

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

Son bir öneri: Projenize bir .npmignore eklemeniz gerekiyor . Eğer npm publishbu dosyayı bulamazsa, bu kullanacağız .gitignorenormalde çünkü sana sorun neden olacaktır, bunun yerine .gitignoredosya hariç tutar ./libve şunları ./srctam olarak NPM için yayınlama zaman istediğini tersi olan. .npmignoreDosya temelde aynı sözdizimi vardır .gitignore(afaik).

José ve Marius'un yaklaşımını takiben (Babel'in 2019'daki en son sürümünü güncelleyerek): En son JavaScript dosyalarını src dizininde tutun ve npm'in prepublishkomut dosyası ve lib dizinine çıktı ile oluşturun.

.npmignore

/src

.gitignore

/lib
/node_modules

Babel'i yükle (benim durumumda 7.5.5 sürümü)

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

Ve src/index.jsok işlevini kullanan var :

"use strict";

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

İşte GitHub'daki repo .

Şimdi paketi yayınlayabilirsiniz:

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

Successfully compiled 1 file with Babel.
...

Paket npm olarak yayınlanmadan önce lib/index.js, bunun es5'e aktarıldığını göreceksiniz:

"use strict";

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

NewOneWithParameters(10, 20);

[Toplama paketleyicisi için güncelleme]

@Kyw tarafından sorduğu gibi, Toplama paketleyicisini nasıl entegre edersiniz?

İlk olarak, yükleyin rollupverollup-plugin-babel

npm install -D rollup rollup-plugin-babel

İkinci olarak, rollup.config.jsproje kök dizininde oluşturun

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

Son olarak, güncelleştirmek prepublishiçindepackage.json

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

Şimdi çalıştırabilirsiniz npm publishve paket npm'de yayınlanmadan önce, lib / index.js'nin oluşturulduğunu ve es5'e aktarıldığını göreceksiniz:

'use strict';

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

NewOneWithParameters(10, 20);

Not: Bu arada, @babel/cliToplama paketleyicisini kullanıyorsanız artık ihtiyacınız yoktur . Güvenle kaldırabilirsiniz:

npm uninstall @babel/cli

Bunu çok basit bir küçük açık kaynak Düğüm modülünde görmek istiyorsanız, o zaman nth gününe (ki başladım - diğer katılımcılar) bir göz atın . Package.json dosyasına ve bunu nereye ve nasıl yapacağınıza götürecek olan önceden yayınlama adımına bakın. Bu modülü klonlarsanız yerel olarak çalıştırabilir ve bunu sizin için bir şablon olarak kullanabilirsiniz.

Node.js 13.2.0+, deney bayrağı olmadan ESM'yi destekler ve karma (ESM ve CommonJS) NPM paketlerini yayınlamak için birkaç seçenek vardır (gerekli geriye dönük uyumluluk düzeyine bağlı olarak): https://2ality.com/2019 /10/hybrid-npm-packages.html

Paketinizin kullanımını kolaylaştırmak için tam geriye dönük uyumluluk yoluna gitmenizi öneririz. Bu şöyle görünebilir:

Karma paket aşağıdaki dosyalara sahiptir:

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

CommonJS'den içe aktarma:

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

ESM'den içe aktarma:

import {x} from 'mypkg/esm';

05.2019'da ESM desteği ile ilgili bir araştırma yaptık ve birçok kütüphanenin desteğinden yoksun olduğunu gördük (dolayısıyla geriye dönük uyumluluk önerisi):

• esm paketinin desteği, sorunlara neden olan Düğümlerle uyumlu değil
  • "Builtin gerektirir .mjs dosyaları sideload olamaz." https://github.com/standard-things/esm#loading , https://github.com/standard-things/esm/issues/498#issuecomment-403496745
  • ".Mjs dosya uzantısı geliştiricilerin birlikte çalışma veya kullanım kolaylığı istediklerinde ulaşabilecekleri bir şey olmamalıdır. Deneysel modüller içerdiği için kullanılabilir, ancak tamamen pişirilmediğinden herhangi bir iyileştirme yapamıyorum. " https://github.com/standard-things/esm/issues/498#issuecomment-403655466
• mocha'nın .mjsdosyalar için yerel desteği yok
  • Güncelleme 2020-01-13: Mocha, mocha@7.0.0-esm1
• Birçok yüksek profilli projenin .mjsdosyalarla ilgili sorunları vardı :
  • oluşturmak-tepki-Uygulama
  • tepki-Apollo
  • graphql-js
  • cehennem

Bir NPM paketinin iki kriteri, a'dan başka bir require( 'package' )şeyle kullanılabilir olmaması ve yazılım-ish bir şey yapmasıdır.

Bu iki şartı yerine getirirseniz, istediğiniz her şeyi yapabilirsiniz. Modül ES6'da yazılmış olsa bile, son kullanıcının bunu bilmesine gerek yoksa, maksimum destek almak için şimdilik onu aktarırım.

Bununla birlikte, koa gibi , modülünüz ES6 özelliklerini kullanan kullanıcılarla uyumluluk gerektirir, belki de iki paket çözümü daha iyi bir fikir olacaktır.

Paket servisi

1. Sadece require( 'your-package' )iş yapmak için gereken kadar kod yayınlayın .
2. ES5 ve 6 arasında kullanıcı önemli değilse, yalnızca 1 paket yayınlayın. Gerekirse aktarın.

Ana anahtar, package.jsonyayınlandıktan sonra pakete giriş noktasına karar verir. Böylece Babel'in çıktısını istediğiniz yere koyabilirsiniz ve sadece mainanahtardaki doğru yoldan bahsetmek zorundasınız .

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

İşte bir npm paketinin nasıl yayınlanacağı hakkında iyi yazılmış bir makale

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

İşte referans için kullanabileceğiniz bir örnek repo

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

Modülünüzün anatomisine bağlı olarak, bu çözüm çalışmayabilir, ancak modülünüz tek bir dosyada bulunuyorsa ve bağımlılıkları yoksa ( içe aktarma işleminden faydalanmıyorsa) ), aşağıdaki deseni kullanarak kodunuzu olduğu gibi serbest bırakabilirsiniz ve içe aktarma (Tarayıcı ES6 Modülleri) ve gereksinimi (Düğüm OrtakJS Modülleri) ile içe aktarılabilir

Bonus olarak, bir SCRIPT HTML Öğesi kullanılarak içe aktarılması uygun olacaktır.

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

Modülünüzü kullanmak için artık normal sözdizimini kullanabilirsiniz ...

NODE'ye içe aktarıldığında ...

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

BROWSER içine aktarıldığında ...

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

Veya HTML Komut Dosyası Öğesi kullanılarak dahil edildiğinde bile ...

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

Kendi modüllerini doğrudan github'dan kullanan , yayınlanan modülleri geçmeyen herkes için birkaç ekstra not :

( Yaygın olarak kullanılan ) "prepublish" kancası sizin için hiçbir şey yapmıyor .

Bir kişinin yapabileceği en iyi şey (yayınlanan şeylere değil, github depolarına güvenmeyi planlıyorsanız):

• Listede yer src.npmignore dan (diğer bir deyişle: izin). Eğer yoksa .npmignore, unutmayın: Bunun .gitignoreyerine kurulu konumda ls node_modules/yourProjectsize göstereceği gibi bir kopyası kullanılacaktır .
• babel-climodülünüzü kullanan bir modül olduğundan emin olun, sadece devDepenceny değil, modülünüzü kullanan Uygulama geliştiriciler bilgisayarında aka tüketen makineye

• kurulum kancada , bir şey yapmak yani:

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

("önyükleme" özelliğini denemede katma değer yoktur, yani babel-cli eksik olabilir)