Saya akan menerbitkan modul untuk NPM, ketika saya berpikir untuk menulis ulang di ES6, untuk kedua-bukti masa depan itu, dan belajar ES6. Saya telah menggunakan Babel untuk mengubah ke ES5, dan menjalankan tes. Tetapi saya tidak yakin bagaimana untuk melanjutkan:

1. Apakah saya mentranspile, dan menerbitkan folder yang dihasilkan / keluar ke NPM?
2. Apakah saya menyertakan folder hasil di repo Github saya?
3. Atau apakah saya memelihara 2 repo, satu dengan kode ES6 + skrip gulp untuk Github, dan satu dengan hasil + tes yang di-transile untuk NPM?

Singkatnya: langkah apa yang harus saya ambil untuk menerbitkan modul yang ditulis dalam ES6 ke NPM, sementara masih memungkinkan orang untuk menelusuri / garpu kode asli?

Pola yang telah saya lihat sejauh ini adalah untuk menyimpan file es6 dalam srcdirektori dan membangun barang-barang Anda di npm's prublish ke libdirektori.

Anda akan memerlukan file .npmignore, mirip dengan Gitignore tetapi mengabaikan srcbukannya lib.

Saya suka jawaban José. Saya perhatikan beberapa modul sudah mengikuti pola itu. Inilah cara Anda dapat dengan mudah mengimplementasikannya dengan Babel6. Saya menginstal babel-clisecara lokal sehingga build tidak rusak jika saya pernah mengubah versi global babel saya.

.npmignore

/src/

.gitignore

/lib/
/node_modules/

Instal 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 - Jangan, sampai ~ Oktober 2019. Tim Modul Node.js telah bertanya :

Harap jangan mempublikasikan paket modul ES yang dimaksudkan untuk digunakan oleh Node.js hingga [Oktober 2019]

Pembaruan 2019 Mei

Sejak 2015 ketika pertanyaan ini diajukan, dukungan JavaScript untuk modul telah matang secara signifikan, dan semoga akan stabil secara resmi pada Oktober 2019. Semua jawaban lain sekarang sudah usang atau terlalu rumit. Inilah situasi saat ini dan praktik terbaik.

Dukungan ES6

99% dari ES6 (alias 2015) telah didukung oleh Node sejak versi 6 . Versi Node saat ini adalah 12. Semua peramban hijau mendukung sebagian besar fitur ES6. ECMAScript sekarang di versi 2019 , dan skema versi sekarang lebih suka menggunakan tahun.

Modul ES (alias modul ECMAScript) di browser

Semua evergreen browser telah mendukung import -ing modul ES6 sejak 2017. impor dinamis yang didukung oleh Chrome (+ garpu seperti Opera dan Samsung internet) dan Safari. Dukungan Firefox dijadwalkan untuk versi berikutnya, 67.

Anda tidak lagi memerlukan Webpack / rollup / Parcel dll untuk memuat modul. Mereka mungkin masih berguna untuk tujuan lain, tetapi tidak diharuskan memuat kode Anda. Anda dapat langsung mengimpor URL yang menunjuk ke kode modul ES.

Modul ES di Node

Modul ES ( .mjsfile dengan import/ export) telah didukung sejak Node v8.5.0 dengan memanggil nodedengan --experimental-modulesflag. Node v12, dirilis pada April 2019, menulis ulang dukungan modul eksperimental. Perubahan yang paling terlihat adalah bahwa ekstensi file harus ditentukan secara default saat mengimpor:

// lib.mjs 

export const hello = 'Hello world!';

// index.mjs:

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

Perhatikan .mjsekstensi wajib di seluruh. Jalankan sebagai:

node --experimental-modules index.mjs

Rilis Node 12 juga ketika Tim Modul meminta pengembang untuk tidak mempublikasikan paket modul ES yang dimaksudkan untuk digunakan oleh Node.js sampai solusi ditemukan untuk menggunakan paket melalui keduanya require('pkg')dan import 'pkg'. Anda masih dapat menerbitkan modul ES asli yang ditujukan untuk browser.

Dukungan ekosistem modul ES asli

Pada Mei 2019, dukungan ekosistem untuk Modul ES belum sempurna. Misalnya, kerangka kerja pengujian seperti Jest dan Ava tidak mendukung --experimental-modules. Anda perlu menggunakan transpiler, dan kemudian harus memutuskan antara menggunakan import { symbol }sintaks import ( ) yang bernama (yang belum bekerja dengan sebagian besar paket npm), dan sintaks impor default ( import Package from 'package'), yang berfungsi, tetapi tidak ketika Babel mem-parsingnya untuk paket - paket yang ditulis dalam TypeScript (graphql-tools, node-influx, faast dll.) Namun ada solusi yang berfungsi baik dengan --experimental-modulesdan jika Babel mengubah kode Anda sehingga Anda dapat mengujinya dengan Jest / Ava / Mocha dll:

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

Bisa dibilang jelek, tetapi dengan cara ini Anda bisa menulis kode modul ES Anda sendiri dengan import/ exportdan menjalankannya node --experimental-modules, tanpa transpiler. Jika Anda memiliki dependensi yang belum siap ESM, impor mereka seperti di atas, dan Anda akan dapat menggunakan kerangka kerja pengujian dan perkakas lain melalui Babel.

Jawaban sebelumnya untuk pertanyaan - ingat, jangan lakukan ini sampai Node menyelesaikan masalah persyaratan / impor, semoga sekitar Oktober 2019.

Menerbitkan modul ES6 ke npm, dengan kompatibilitas ke belakang

Untuk menerbitkan modul ES untuk npmjs.org sehingga dapat diimpor langsung, tanpa Babel atau transpilers lainnya, hanya titik mainlapangan di Anda package.jsonke .mjsfile, namun menghilangkan ekstensi:

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

Itu satu-satunya perubahan. Dengan menghilangkan ekstensi, Node akan mencari file mjs terlebih dahulu jika dijalankan dengan --experimental-modules. Jika tidak, ia akan kembali ke file .js, sehingga proses transpilasi Anda yang ada untuk mendukung versi Node yang lebih lama akan berfungsi seperti sebelumnya - pastikan untuk mengarahkan Babel ke .mjsfile tersebut.

Inilah sumber untuk modul ES asli dengan kompatibilitas ke belakang untuk Node <8.5.0 yang saya terbitkan ke NPM. Anda dapat menggunakannya sekarang, tanpa Babel atau apa pun.

Pasang modul:

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

Buat file tes test.mjs :

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

Jalankan node (v8.5.0 +) dengan flag --experimental-modules:

node --experimental-modules test.mjs

TypeScript

Jika Anda mengembangkan dalam TypeScript, Anda dapat menghasilkan kode ES6 dan menggunakan modul ES6:

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

Kemudian, Anda perlu mengubah nama *.jskeluaran menjadi .mjs, masalah yang diketahui yang diharapkan akan segera diperbaiki sehingga tscdapat menampilkan .mjsfile secara langsung.

@ Jose benar. Tidak ada yang salah dengan menerbitkan ES6 / ES2015 ke NPM tetapi itu dapat menyebabkan masalah, khususnya jika orang yang menggunakan paket Anda menggunakan Webpack, misalnya, karena biasanya orang mengabaikan node_modulesfolder saat preprocessing dengan babelalasan kinerja.

Jadi, cukup gunakan gulp, gruntatau cukup Node.js untuk membuat libfolder yang ES5.

Inilah build-lib.jsskrip saya , yang saya simpan ./tools/(tidak gulpatau di gruntsini):

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

Berikut saran terakhir: Anda perlu menambahkan .npmignore ke proyek Anda . Jika npm publishtidak menemukan file ini, itu akan digunakan .gitignoresebagai gantinya, yang akan menyebabkan Anda bermasalah karena biasanya .gitignorefile Anda akan dikecualikan ./libdan disertakan ./src, yang merupakan kebalikan dari apa yang Anda inginkan saat Anda menerbitkan ke NPM. The .npmignoreberkas pada dasarnya memiliki sintaks yang sama .gitignore(AFAIK).

Mengikuti pendekatan José dan Marius, (dengan pembaruan versi terbaru Babel pada tahun 2019): Simpan file JavaScript terbaru dalam direktori src, dan bangun dengan prepublishskrip npm dan hasilkan ke direktori lib.

.npmignore

/src

.gitignore

/lib
/node_modules

Instal Babel (versi 7.5.5 dalam kasus saya)

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

Dan saya punya src/index.jsyang menggunakan fungsi panah:

"use strict";

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

Inilah repo di GitHub .

Sekarang Anda dapat mempublikasikan paket:

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

Successfully compiled 1 file with Babel.
...

Sebelum paket dipublikasikan ke npm, Anda akan melihat bahwa lib/index.jstelah dihasilkan, yang dialihkan ke es5:

"use strict";

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

NewOneWithParameters(10, 20);

[Pembaruan untuk Rollup bundler]

Sebagaimana ditanyakan oleh @kyw, bagaimana Anda mengintegrasikan bundler Rollup?

Pertama, instal rollupdanrollup-plugin-babel

npm install -D rollup rollup-plugin-babel

Kedua, buat rollup.config.jsdi direktori root proyek

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

Terakhir, memperbarui prepublishdipackage.json

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

Sekarang Anda dapat menjalankan npm publish, dan sebelum paket diterbitkan ke npm, Anda akan melihat bahwa lib / index.js telah dihasilkan, yang ditranslasikan ke es5:

'use strict';

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

NewOneWithParameters(10, 20);

Catatan: ngomong-ngomong, Anda tidak perlu lagi @babel/clijika menggunakan bundler Rollup. Anda dapat dengan aman menghapusnya:

npm uninstall @babel/cli

Jika Anda ingin melihat ini beraksi dalam modul Node open source kecil yang sangat sederhana maka lihatlah hari ke-n (yang saya mulai - juga kontributor lainnya). Lihat di file package.json dan pada langkah prapublikasi yang akan mengarahkan Anda ke mana dan bagaimana melakukannya. Jika Anda mengkloning modul itu, Anda dapat menjalankannya secara lokal dan menggunakannya sebagai templat untuk Anda.

Node.js 13.2.0+ mendukung ESM tanpa flag eksperimental dan ada beberapa opsi untuk menerbitkan paket NPM hybrid (ESM dan CommonJS) (tergantung pada tingkat kompatibilitas yang dibutuhkan): https://2ality.com/2019 /10/hybrid-npm-packages.html

Saya sarankan pergi cara kompatibilitas penuh untuk membuat penggunaan paket Anda lebih mudah. Ini bisa terlihat sebagai berikut:

Paket hybrid memiliki file-file berikut:

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

Mengimpor dari CommonJS:

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

Mengimpor dari ESM:

import {x} from 'mypkg/esm';

Kami melakukan penyelidikan terhadap dukungan ESM pada 05.2019 dan menemukan bahwa banyak perpustakaan kekurangan dukungan (maka rekomendasi untuk kompatibilitas mundur):

• Dukungan paket ESM tidak sejajar dengan Node yang menyebabkan masalah
  • "Dibutuhkan builtin tidak dapat sideload file .mjs." https://github.com/standard-things/esm#loading , https://github.com/standard-things/esm/issues/498#issuecomment-403496745
  • "Ekstensi file .mjs seharusnya bukan hal yang dapat dijangkau oleh pengembang jika mereka menginginkan interop atau kemudahan penggunaan. Ini tersedia karena dalam --experimental-modul tetapi karena itu tidak sepenuhnya dipanggang saya tidak dapat berkomitmen untuk peningkatan apa pun untuk itu. " https://github.com/standard-things/esm/issues/498#issuecomment-403655466
• mocha tidak memiliki dukungan asli untuk .mjsfile
  • Pembaruan 2020-01-13: Mocha merilis dukungan eksperimental di [email protected]
• Banyak proyek profil tinggi memiliki masalah dengan .mjsfile:
  • buat-reaksi-aplikasi
  • bereaksi apollo
  • graphql-js
  • neraka

Dua kriteria paket NPM adalah bahwa ia dapat digunakan dengan tidak lebih dari sebuah require( 'package' )dan melakukan sesuatu perangkat lunak.

Jika Anda memenuhi kedua persyaratan itu, Anda dapat melakukan apa pun yang Anda inginkan. Sekalipun modul ditulis dalam ES6, jika pengguna akhir tidak perlu mengetahuinya, saya akan memindahkannya untuk saat ini untuk mendapatkan dukungan maksimal.

Namun, jika seperti koa , modul Anda memerlukan kompatibilitas dengan pengguna yang menggunakan fitur ES6, maka mungkin solusi dua paket akan menjadi ide yang lebih baik.

Bawa pulang

1. Hanya publikasikan kode sebanyak yang Anda butuhkan untuk require( 'your-package' )bekerja.
2. Kecuali jika ES5 & 6 penting bagi pengguna, hanya publikasikan 1 paket. Transpile jika Anda harus.

Kunci utama dalam package.jsonmenentukan titik masuk ke paket setelah diterbitkan. Jadi, Anda dapat menempatkan output Babel di mana pun Anda inginkan dan hanya perlu menyebutkan jalur yang benar main.

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

Inilah artikel yang ditulis dengan baik tentang cara mempublikasikan paket npm

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

Berikut ini contoh repo yang dapat Anda gunakan untuk referensi

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

Bergantung pada anatomi modul Anda, solusi ini mungkin tidak berfungsi, tetapi jika modul Anda terkandung di dalam satu file, dan tidak memiliki dependensi (tidak menggunakan impor ), menggunakan pola berikut Anda dapat melepaskan kode Anda seperti itu , dan akan dapat diimpor dengan impor (Browser ES6 Modul) dan memerlukan (Modul Node CommonJS)

Sebagai bonus, akan layak untuk diimpor menggunakan Elemen HTML SCRIPT.

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

Untuk menggunakan modul Anda, sekarang Anda dapat menggunakan sintaks ...

Saat diimpor dalam NODE ...

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

Saat diimpor dalam BROWSER ...

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

Atau bahkan ketika disertakan menggunakan Elemen Script HTML ...

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

Beberapa catatan tambahan untuk siapa saja, menggunakan modul sendiri langsung dari github, tidak melalui modul yang diterbitkan :

The ( banyak digunakan ) "prepublish" hook tidak melakukan apa-apa untuk Anda.

Hal terbaik yang dapat dilakukan (jika berencana mengandalkan repositori github, bukan hal-hal yang dipublikasikan):

• batalkan daftar srcdari .npmignore (dengan kata lain: izinkan saja). Jika Anda tidak memiliki .npmignore, ingat: Salinan .gitignoreakan digunakan sebagai gantinya di lokasi yang diinstal, seperti yang ls node_modules/yourProjectakan menunjukkan kepada Anda.
• pastikan, babel-cliadalah ketergantungan pada modul Anda, bukan hanya devDepenceny karena Anda memang membangun mesin konsumsi alias di komputer pengembang aplikasi, yang menggunakan modul Anda

• lakukan build build, di install hook yaitu:

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

(tidak ada nilai tambah dalam mencoba apa pun "pra-instal", yaitu babel-cli mungkin hilang)