Я собирался опубликовать модуль для NPM, когда подумал о переписывании его в ES6, как в будущем, так и в изучении ES6. Я использовал Babel для перевода на ES5 и запуска тестов. Но я не уверен, как действовать:
Вкратце: какие шаги я должен предпринять, чтобы опубликовать модуль, написанный на ES6, в NPM, но все же позволяя людям просматривать/форматировать исходный код?
Образец, который я видел до сих пор, заключается в том, чтобы сохранить файлы es6 в каталоге src и создать ваш материал в npm, чтобы опубликовать его в каталоге lib.
Вам понадобится файл .npmignore, похожий на .gitignore, но игнорирующий src вместо lib.
Мне нравится ответ Хосе. Я заметил, что несколько модулей уже соответствуют этой схеме. Вот как вы можете легко реализовать его с Babel6. Я устанавливаю babel-cli локально, поэтому сборка не прерывается, если я когда-либо изменю свою глобальную версию babel.
.npmignore
/src/
.gitignore
/lib/
/node_modules/
Установить Babel
npm install --save-dev babel-core babel-cli babel-preset-es2015
package.json
{
"main": "lib/index.js",
"scripts": {
"prepublish": "node_modules/babel-cli/bin/babel.js src --out-dir lib"
},
"babel": {
"presets": ["es2015"]
}
}
TL; DR - не раньше ~ октября 2019 года. Команда модулей Node.js Modules Team спросила : Пожалуйста, не публикуйте никакие пакеты модулей ES, предназначенные для использования Node.js, до [октября 2019 года]
2019 май обновление
Поддержка ES6
с версии 6 . Текущая версия Node - 12. Все вечнозеленые браузеры поддерживают подавляющее большинство функций ES6. ECMAScript теперь находится на версии 2019 , а схема управления версиями теперь предпочитает использовать годы. ES-модули (также известные как ECMAScript-модули) в браузерах
All evergreen browsers поддерживают import -ing модули ES6 с 2017 года. Динамический импорт Dynamic imports are поддерживается Chrome (+ вилки, такие как Opera и Samsung Интернет) и Safari. Поддержка Firefox запланирована на следующую версию, 67.
Вам больше не нужен Webpack/Rollup/Parcel и т.д. Для загрузки модулей. Они могут все еще быть полезными для других целей, но не обязательны для загрузки вашего кода. Вы можете напрямую импортировать URL-адреса, указывающие на код модулей ES.
Модули ES (файлы .mjs с import/export) поддерживаются начиная с узла v8.5.0, вызывая node с флагом --experimental-modules. Node v12, выпущенный в апреле 2019 года, переписал поддержку экспериментальных модулей. Наиболее заметным изменением является то, что расширение файла должно быть указано по умолчанию при импорте:
// lib.mjs
export const hello = 'Hello world!';
// index.mjs:
import { hello } from './lib.mjs';
console.log(hello);
Обратите внимание на обязательные расширения .mjs. Запускать как:
node --experimental-modules index.mjs
В выпуске Node 12 команда разработчиков модулей попросила разработчиков не публиковать пакеты модулей ES , предназначенные для использования Node.js, до тех пор, пока не будет найдено решение для использования пакетов через оба require('pkg') и import 'pkg'. Вы по-прежнему можете публиковать собственные модули ES, предназначенные для браузеров.
По состоянию на май 2019 года экосистемная поддержка модулей ES является незрелой. Например, тестовые среды, такие как Jest и Ava, не поддерживают --experimental-modules. Вам нужно использовать транспортер, а затем выбрать между использованием именованного синтаксиса импорта (import { symbol }) (который пока не работает с большинством пакетов npm) и синтаксиса импорта по умолчанию (import Package from 'package'), который работает, но нет, когда Babel анализирует его для пакетов, созданных в TypeScript (graphql-tools, node-infl, faast и т.д.). Однако существует обходной путь, который работает как с --experimental-modules, так и с Babel передает ваш код, чтобы вы могли проверить его с помощью Jest/Ava/Mocha и т. Д.:
import * as ApolloServerM from 'apollo-server'; const ApolloServer = ApolloServerM.default || ApolloServerM;
Возможно, некрасиво, но таким образом вы можете написать свой собственный код ES-модулей с помощью import/export и запустить его с node --experimental-modules, без транспортеров. Если у вас есть зависимости, которые еще не готовы к ESM, импортируйте их, как указано выше, и вы сможете использовать тестовые среды и другие инструменты через Babel.
Предыдущий ответ на вопрос - помните, не делайте этого до тех пор, пока Node не решит проблему спроса/импорта, возможно, в октябре 2019 года.
Чтобы опубликовать ES-модуль на npmjs.org, чтобы его можно было импортировать напрямую, без Babel или других транспортеров, просто укажите поле main в вашем package.json на файл .mjs, но пропустите расширение:
{
"name": "mjs-example",
"main": "index"
}
Это единственное изменение. Опуская расширение, Node будет сначала искать файл mjs, если он запускается с --experimental-modules. В противном случае он вернется к файлу .js, поэтому ваш существующий процесс переноса для поддержки более старых версий Node будет работать, как и раньше, - просто убедитесь, что Babel указывает на файл .mjs.
Здесь источник для собственного модуля ES с обратной совместимостью для Node & lt; 8.5.0, который я опубликовал в NPM. Вы можете использовать его прямо сейчас, без Вавилона или чего-либо еще.
Установите модуль:
npm install local-iso-dt
# or, yarn add local-iso-dt
Создайте тестовый файл test.mjs:
import { localISOdt } from 'local-iso-dt/index.mjs';
console.log(localISOdt(), 'Starting job...');
Запустите узел (v8.5. 0+) с флагом --experimental-modules:
node --experimental-modules test.mjs
Если вы разрабатываете на языке TypeScript, вы можете создавать код ES6 и использовать модули ES6:
tsc index.js --target es6 --modules es2015
Затем вам нужно переименовать вывод *.js в .mjs, известную проблему, которая, как мы надеемся, скоро будет устранена, чтобы tsc мог выводить файлы .mjs напрямую.
@Правильно. Нет ничего плохого в публикации ES6/ES2015 в NPM, но это может вызвать проблемы, особенно если человек, использующий ваш пакет, использует Webpack, например, потому что обычно люди игнорируют папку node_modules при предварительной обработке с помощью babel по соображениям производительности.
Итак, просто используйте gulp, grunt или просто Node.js для сборки папки lib, которая является ES5.
Здесь my build-lib.js script, который я храню в ./tools/ (здесь gulp или grunt здесь):
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));
Вот последний совет: вам нужно добавить .npmignore в ваш проект. Если npm publish не найдет этот файл, вместо этого он будет использовать .gitignore, что вызовет проблемы, потому что обычно ваш файл .gitignore исключает ./lib и включает ./src, что в точности противоположно тому, что вы хотите, когда вы публикуете NPM. Файл .npmignore имеет в основном тот же синтаксис .gitignore (AFAIK).
Если вы хотите увидеть это в действии в очень простом модуле с открытым исходным кодом Node, то посмотрите nth-day ( который я начал - также другие участники). Посмотрите в файле package.json и на этапе prepublish, который приведет вас к тому, где и как это сделать. Если вы клонируете этот модуль, вы можете запустить его локально и использовать его в качестве шаблона для вас.
Два критерия пакета NPM заключаются в том, что он может использоваться только с require( 'package' ) и делает что-то программное.
Если вы выполняете эти два требования, вы можете делать все, что пожелаете. Даже если модуль написан на ES6, если конечный пользователь не должен этого знать, я бы перебросил его для получения максимальной поддержки.
Однако, если, например, koa, ваш модуль требует совместимости с пользователями, использующими функции ES6, то, возможно, два решения пакета будут лучше идея.
require( 'your-package' ). Главный ключ в package.json определяет точку входа в пакет после его публикации. Таким образом, вы можете поместить свой вывод Babel куда угодно и просто указать правильный путь в main ключе.
"main": "./lib/index.js",
Здесь хорошо написана статья о том, как опубликовать пакет npm
https://codeburst.io/publish-your-own-npm-package-ff918698d450
Здесь образец репо вы можете использовать для справки
Следуя подходу Хосе и Мариуса (с обновлением последней версии Babel в 2019 году): сохраните последние файлы JavaScript в каталоге src, соберите их с помощью скрипта npm prepublish и выведите в каталог lib.
.npmignore
/src
.gitignore
/lib
/node_modules
Установите Babel (в моем случае версия 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 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"
]
}
}
И у меня есть src/index.js, который использует функцию стрелки:
"use strict";
let NewOneWithParameters = (a, b) => {
console.log(a + b); // 30
};
NewOneWithParameters(10, 20);
Теперь вы можете опубликовать пакет:
$ npm publish
...
> [email protected] prepublish .
> babel src -d lib
Successfully compiled 1 file with Babel.
...
Перед публикацией пакета в npm вы увидите, что сгенерирован lib/index.js, который передается в es5:
"use strict";
var NewOneWithParameters = function NewOneWithParameters(a, b) {
console.log(a + b); // 30
};
NewOneWithParameters(10, 20);
[Обновление для накопительного пакета]
Как спросил @kyw, как бы вы интегрировали Rollup bundler?
Сначала установите rollup и rollup-plugin-babel
npm install -D rollup rollup-plugin-babel
Во-вторых, создайте rollup.config.js в корневом каталоге проекта
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/**"
})
]
};
Наконец, обновите prepublish в package.json
{
...
"scripts": {
"prepublish": "rollup -c"
},
...
}
Теперь вы можете запустить npm publish, и, прежде чем пакет будет опубликован в npm, вы увидите, что был создан lib/index.js, который передается в es5:
'use strict';
var NewOneWithParameters = function NewOneWithParameters(a, b) {
console.log(a + b); // 30
};
NewOneWithParameters(10, 20);
Примечание: кстати, вам больше не нужен @babel/cli, если вы используете связующий пакет. Вы можете безопасно удалить его:
npm uninstall @babel/cli
В зависимости от анатомии вашего модуля, это решение может не работать, но если ваш модуль содержится в одном файле и не имеет зависимостей (не использует импорт), используя следующий шаблон, вы можете освободить свой код как есть. и сможет импортироваться с помощью импорта (модули Browser ES6) и требовать (модули Node CommonJS)
В качестве бонуса, он будет пригоден для импорта с использованием элемента 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 */
}
Чтобы использовать свой модуль, теперь вы можете использовать обычный синтаксис...
При импорте в NODE...
let myModule = require('my-module');
myModule.helloWorld();
// outputs 'Hello World!'
При импорте в браузер...
import {myModule} from './my-module.js';
myModule.helloWorld();
// outputs 'Hello World!'
Или даже если он включен с использованием элемента HTML Script...
<script src="./main.js"></script>
<script>
myModule.helloWorld();
// outputs 'Hello World!'
</script>
(широко используется). "prepublish" hook ничего не делает для вас.
Лучшая вещь, которую можно сделать (если планируете полагаться на репозитории github, а не на публикацию):
src из .npmignore(другими словами: разрешить его). Если у вас нет .npmignore, запомните: копия .gitignore будет использоваться вместо этого в установленном месте, так как ls node_modules/yourProject покажет вам.babel-cli является зависимым от вашего модуля, а не только devDepenceny, поскольку вы действительно строите на компьютере-потребителе, например, на компьютере разработчиков приложений, который использует ваш модуль.выполните сборку, в установить hook i.e.:
"install": "babel src -d lib -s"
(без добавленной стоимости при попытке чего-либо "предустановить", т.е. babel-cli может отсутствовать)