Tôi chuẩn bị xuất bản một mô-đun lên NPM, khi tôi nghĩ về việc viết lại nó trong ES6, để chứng minh nó trong tương lai và tìm hiểu ES6. Tôi đã sử dụng Babel để dịch mã sang ES5 và chạy thử nghiệm. Nhưng tôi không chắc cách tiến hành:

1. Tôi có dịch mã và xuất bản thư mục kết quả / ra cho NPM không?
2. Tôi có bao gồm thư mục kết quả trong repo Github của tôi không?
3. Hoặc tôi có duy trì 2 repos, một với mã ES6 + tập lệnh gulp cho Github và một với kết quả được phiên mã + kiểm tra NPM không?

Tóm lại: tôi cần thực hiện những bước nào để xuất bản một mô-đun được viết bằng ES6 lên NPM, trong khi vẫn cho phép mọi người duyệt / phân tách mã gốc?

Mẫu mà tôi đã thấy cho đến nay là giữ các tệp es6 trong một srcthư mục và xây dựng nội dung của bạn trong bản phát hành trước của npm vào libthư mục.

Bạn sẽ cần một tệp .npmignore, tương tự như .gitignore nhưng bỏ qua srcthay vì lib.

Tôi thích câu trả lời của Jose. Tôi đã nhận thấy một số mô-đun theo mô hình đó rồi. Đây là cách bạn có thể dễ dàng thực hiện với Babel6. Tôi cài đặt babel-clicục bộ để bản dựng không bị hỏng nếu tôi thay đổi phiên bản babel toàn cầu của mình.

.npmignore

/src/

.gitignore

/lib/
/node_modules/

Cài đặt Babel

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

pack.json

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

TL; DR - Đừng, cho đến ~ tháng 10 năm 2019. Nhóm Mô-đun Node.js đã hỏi :

Vui lòng không xuất bản bất kỳ gói mô-đun ES nào được Node.js sử dụng cho đến [tháng 10 năm 2019]

Cập nhật tháng 5 năm 2019

Kể từ năm 2015 khi câu hỏi này được hỏi, hỗ trợ JavaScript cho các mô-đun đã trưởng thành đáng kể và hy vọng sẽ chính thức ổn định vào tháng 10 năm 2019. Tất cả các câu trả lời khác hiện đã lỗi thời hoặc quá phức tạp. Dưới đây là tình hình hiện tại và thực hành tốt nhất.

Hỗ trợ ES6

99% ES6 (còn gọi là 2015) đã được Node hỗ trợ kể từ phiên bản 6 . Phiên bản hiện tại của Node là 12. Tất cả các trình duyệt thường xanh hỗ trợ phần lớn các tính năng ES6. ECMAScript hiện đang ở phiên bản 2019 và chương trình phiên bản hiện đang được ưa chuộng sử dụng nhiều năm.

Mô-đun ES (còn gọi là mô-đun ECMAScript) trong trình duyệt

Tất cả các trình duyệt thường xanh đã hỗ trợ import các mô-đun ES6 kể từ năm 2017. Nhập khẩu động được hỗ trợ bởi Chrome (+ các nhánh như Opera và Samsung Internet) và Safari. Hỗ trợ Firefox dự kiến ​​cho phiên bản tiếp theo, 67.

Bạn không còn cần Webpack / rollup / Parcel, v.v. để tải các mô-đun. Chúng có thể vẫn hữu ích cho các mục đích khác, nhưng không bắt buộc phải tải mã của bạn. Bạn có thể nhập trực tiếp các URL trỏ đến mã mô-đun ES.

Các mô-đun ES trong Node

Các mô-đun ES ( .mjstệp có import/ export) đã được hỗ trợ kể từ Node v8.5.0 bằng cách gọi nodebằng --experimental-modulescờ. Node v12, được phát hành vào tháng 4 năm 2019, viết lại các hỗ trợ mô-đun thử nghiệm. Thay đổi rõ ràng nhất là phần mở rộng tệp cần được chỉ định theo mặc định khi nhập:

// lib.mjs 

export const hello = 'Hello world!';

// index.mjs:

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

Lưu ý các .mjsphần mở rộng bắt buộc trong suốt. Chạy như:

node --experimental-modules index.mjs

Bản phát hành Node 12 cũng là khi Nhóm Mô-đun yêu cầu các nhà phát triển không xuất bản các gói mô-đun ES dành cho Node.js sử dụng cho đến khi tìm thấy giải pháp cho việc sử dụng các gói thông qua cả hai require('pkg')và import 'pkg'. Bạn vẫn có thể xuất bản các mô-đun ES gốc dành cho trình duyệt.

Hỗ trợ hệ sinh thái của các mô đun ES bản địa

Kể từ tháng 5 năm 2019, hỗ trợ hệ sinh thái cho các Mô-đun ES là chưa trưởng thành. Ví dụ: các khung kiểm tra như Jest và Ava không hỗ trợ --experimental-modules. Bạn cần sử dụng một bộ chuyển mã, và sau đó phải quyết định giữa việc sử dụng import { symbol }cú pháp import ( ) có tên ( chưa hoạt động với hầu hết các gói npm) và cú pháp nhập mặc định ( import Package from 'package'), hoạt động, nhưng không phải khi Babel phân tích cú pháp đối với các gói được tạo ra trong TypeScript (graphql-tools, node-Influx, faast, v.v.) Tuy nhiên, có một cách giải quyết hoạt động cả với --experimental-modulesvà nếu Babel dịch mã của bạn để bạn có thể kiểm tra nó với Jest / Ava / Mocha, v.v.

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

Có thể cho là xấu xí, nhưng bằng cách này bạn có thể viết mã mô-đun ES của riêng bạn với import/ exportvà chạy nó với node --experimental-modules, mà không cần bộ chuyển đổi. Nếu bạn có các phụ thuộc chưa sẵn sàng ESM, hãy nhập chúng như trên và bạn sẽ có thể sử dụng các khung kiểm tra và các công cụ khác thông qua Babel.

Câu trả lời trước cho câu hỏi - hãy nhớ, đừng làm điều này cho đến khi Node giải quyết vấn đề yêu cầu / nhập khẩu, hy vọng vào khoảng tháng 10 năm 2019.

Xuất bản các mô-đun ES6 lên npm, với khả năng tương thích ngược

Để xuất bản một mô-đun ES lên npmjs.org để có thể nhập trực tiếp, không cần Babel hoặc các bộ chuyển đổi khác, chỉ cần trỏ maintrường trong tệp của bạn package.jsonvào .mjstệp, nhưng bỏ qua phần mở rộng:

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

Đó là sự thay đổi duy nhất. Bằng cách bỏ qua phần mở rộng, Node sẽ tìm tệp mjs đầu tiên nếu chạy với --experimental-mô-đun. Nếu không, nó sẽ rơi trở lại tệp .js, vì vậy quy trình dịch mã hiện có của bạn để hỗ trợ các phiên bản Node cũ hơn sẽ hoạt động như trước - chỉ cần đảm bảo trỏ Babel vào .mjs(các) tệp.

Đây là nguồn cho một mô-đun ES gốc có khả năng tương thích ngược với Node <8.5.0 mà tôi đã xuất bản cho NPM. Bạn có thể sử dụng nó ngay bây giờ, không cần Babel hay bất cứ thứ gì khác.

Cài đặt mô-đun:

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

Tạo một tệp thử nghiệm test.mjs :

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

Chạy nút (v8.5.0 +) với cờ --experimental-mô-đun:

node --experimental-modules test.mjs

TypeScript

Nếu bạn phát triển trong TypeScript, bạn có thể tạo mã ES6 và sử dụng các mô-đun ES6:

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

Sau đó, bạn cần đổi tên *.jsđầu ra thành .mjs, một vấn đề đã biết hy vọng sẽ được khắc phục sớm để tsccó thể xuất .mjstệp trực tiếp.

@Jose nói đúng. Chẳng có gì sai khi xuất bản ES6 / ES2015 lên NPM nhưng điều đó có thể gây rắc rối, đặc biệt nếu người sử dụng gói của bạn đang sử dụng Webpack, vì thông thường mọi người bỏ qua node_modulesthư mục trong khi xử lý trước babelvì lý do hiệu suất.

Vì vậy, chỉ cần sử dụng gulp, grunthoặc đơn giản là Node.js để xây dựng một libthư mục đó là ES5.

Đây là build-lib.jskịch bản của tôi , mà tôi giữ ./tools/(không có gulphoặc gruntở đây):

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

Đây là lời khuyên cuối cùng: Bạn cần thêm .npmignore vào dự án của mình . Nếu npm publishkhông tìm thấy tệp này, nó sẽ sử dụng .gitignorethay vào đó, điều này sẽ gây rắc rối cho bạn vì thông thường .gitignoretệp của bạn sẽ loại trừ ./libvà bao gồm ./src, điều này hoàn toàn ngược lại với những gì bạn muốn khi bạn xuất bản lên NPM. Các .npmignoretệp về cơ bản có cùng cú pháp của .gitignore(AFAIK).

Theo cách tiếp cận của Jose và Marius, (với bản cập nhật phiên bản mới nhất của Babel năm 2019): Giữ các tệp JavaScript mới nhất trong thư mục src và xây dựng với prepublishtập lệnh của npm và xuất ra thư mục lib.

.npmignore

/src

.gitignore

/lib
/node_modules

Cài đặt Babel (phiên bản 7.5.5 trong trường hợp của tôi)

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

pack.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"
    ]
  }
}

Và tôi có src/index.jssử dụng chức năng mũi tên:

"use strict";

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

Đây là repo trên GitHub .

Bây giờ bạn có thể xuất bản gói:

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

Successfully compiled 1 file with Babel.
...

Trước khi gói được xuất bản đến npm, bạn sẽ thấy nó lib/index.jsđã được tạo, được dịch mã sang es5:

"use strict";

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

NewOneWithParameters(10, 20);

[Cập nhật cho gói Rollup]

Theo yêu cầu của @kyw, bạn sẽ tích hợp gói Rollup như thế nào?

Đầu tiên, cài đặt rollupvàrollup-plugin-babel

npm install -D rollup rollup-plugin-babel

Thứ hai, tạo rollup.config.jstrong thư mục gốc của dự án

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

Cuối cùng, cập nhật prepublishtrongpackage.json

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

Bây giờ bạn có thể chạy npm publishvà trước khi gói được xuất bản đến npm, bạn sẽ thấy lib / index.js đã được tạo, được dịch mã thành es5:

'use strict';

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

NewOneWithParameters(10, 20);

Lưu ý: nhân tiện, bạn không còn cần @babel/clinếu bạn đang sử dụng gói Rollup. Bạn có thể gỡ cài đặt nó một cách an toàn:

npm uninstall @babel/cli

Nếu bạn muốn thấy điều này hoạt động trong một mô-đun Node mã nguồn mở nhỏ rất đơn giản thì hãy xem ngày thứ n (mà tôi đã bắt đầu - cũng là những người đóng góp khác). Hãy xem tệp pack.json và ở bước chuẩn bị xuất bản sẽ dẫn bạn đến nơi và cách thực hiện việc này. Nếu bạn sao chép mô-đun đó, bạn có thể chạy nó cục bộ và sử dụng nó làm mẫu cho bạn.

Node.js 13.2.0+ hỗ trợ ESM mà không cần cờ thử nghiệm và có một vài tùy chọn để xuất bản các gói NPM lai (ESM và CommonJS) (tùy thuộc vào mức độ tương thích ngược cần thiết): https://2ality.com/2019 /10/hy điều-npm-pack.html

Tôi khuyên bạn nên thực hiện cách tương thích ngược đầy đủ để làm cho việc sử dụng gói của bạn dễ dàng hơn. Điều này có thể trông như sau:

Gói lai có các tệp sau:

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

Nhập từ CommonJS:

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

Nhập từ ESM:

import {x} from 'mypkg/esm';

Chúng tôi đã thực hiện một cuộc điều tra về hỗ trợ ESM vào tháng 05.2019 và thấy rằng rất nhiều thư viện đang thiếu hỗ trợ (do đó khuyến nghị về khả năng tương thích ngược):

• Hỗ trợ của gói esm không phù hợp với Node gây ra sự cố
  • "Nội dung yêu cầu không thể tải các tệp .mjs." https://github.com/st Chuẩn-things / esm # loading , https://github.com/stiteria-things/esm/issues/498#issuecomment-403496745
  • "Phần mở rộng tệp .mjs không phải là thứ mà các nhà phát triển tiếp cận nếu họ muốn xen kẽ hoặc dễ sử dụng. Nó có sẵn trong các mô-đun -experimental nhưng vì nó không được nướng hoàn toàn nên tôi không thể cam kết với bất kỳ cải tiến nào. " https://github.com/stiteria-things/esm/issues/498#issuecomment-403655466
• mocha không có hỗ trợ riêng cho .mjscác tập tin
  • Cập nhật 2020-01-13: Mocha phát hành hỗ trợ thử nghiệm trong mocha@7.0.0-esm1
• Nhiều dự án cao cấp có vấn đề với .mjscác tập tin:
  • tạo-phản ứng-ứng dụng
  • phản ứng
  • đồ thị-js
  • địa ngục

Hai tiêu chí của gói NPM là nó có thể sử dụng được mà không cần nhiều hơn một require( 'package' )và làm một cái gì đó phần mềm.

Nếu bạn thực hiện hai yêu cầu đó, bạn có thể làm bất cứ điều gì bạn muốn. Ngay cả khi mô-đun được viết bằng ES6, nếu người dùng cuối không cần biết điều đó, tôi sẽ chuyển nó ngay bây giờ để được hỗ trợ tối đa.

Tuy nhiên, nếu như koa , mô-đun của bạn yêu cầu khả năng tương thích với người dùng sử dụng các tính năng ES6, thì có lẽ giải pháp hai gói sẽ là một ý tưởng tốt hơn.

Lấy đi

1. Chỉ xuất bản nhiều mã như bạn cần để làm require( 'your-package' )việc.
2. Trừ khi giữa ES5 và 6 có vấn đề với người dùng, chỉ xuất bản 1 gói. Truyền nó nếu bạn phải.

Chìa khóa chính package.jsonquyết định điểm vào gói khi nó được xuất bản. Vì vậy, bạn có thể đặt đầu ra của Babel bất cứ nơi nào bạn muốn và chỉ cần đề cập đến đường dẫn đúng trong mainkhóa.

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

Đây là một bài viết tốt về cách xuất bản một gói npm

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

Đây là một repo mẫu bạn có thể sử dụng để tham khảo

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

Tùy thuộc vào giải phẫu mô-đun của bạn, giải pháp này có thể không hoạt động, nhưng nếu mô-đun của bạn được chứa trong một tệp duy nhất và không có phụ thuộc (không sử dụng nhập ), sử dụng mẫu sau bạn có thể giải phóng mã của mình vì nó là và sẽ có thể được nhập với nhập (Mô-đun ES6 của Trình duyệt) và yêu cầu (Mô-đun Node CommonJS)

Là một phần thưởng, nó sẽ có thể được nhập khẩu bằng Phần tử 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};

pack.json : `

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

Để sử dụng mô-đun của bạn, bây giờ bạn có thể sử dụng cú pháp thông thường ...

Khi được nhập trong NODE ...

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

Khi được nhập trong BROWSER ...

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

Hoặc thậm chí khi được bao gồm bằng Phần tử tập lệnh HTML ...

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

Một vài lưu ý thêm cho bất kỳ ai, sử dụng các mô-đun riêng trực tiếp từ github, không thông qua các mô-đun được xuất bản :

Các ( sử dụng rộng rãi ) "prepublish" móc không làm bất cứ điều gì cho bạn.

Điều tốt nhất người ta có thể làm (nếu kế hoạch dựa vào repos github, không được công bố):

• ngừng công bố srctừ .npmignore (nói cách khác: cho phép nó). Nếu bạn không có .npmignore, hãy nhớ: Một bản sao .gitignoresẽ được sử dụng thay thế ở vị trí đã cài đặt, như ls node_modules/yourProjectsẽ hiển thị cho bạn.
• hãy chắc chắn, babel-clilà một sự thiếu hụt trong mô-đun của bạn, không chỉ là một devDepenceny vì bạn thực sự đang xây dựng trên máy tiêu thụ hay còn gọi là máy tính của nhà phát triển ứng dụng, người đang sử dụng mô-đun của bạn

• làm điều xây dựng, trong hook cài đặt tức là:

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

(không có giá trị gia tăng nào khi thử bất cứ thứ gì "cài đặt sẵn", tức là babel-cli có thể bị thiếu)