ES6로 작성된 모듈을 NPM에 게시하려면 어떻게 해야 합니까?
제가 NPM에 모듈을 발표하려고 할 때, ES6에 모듈을 다시 작성하고 미래에 대비하고 ES6를 배우려고 생각했습니다.바벨을 이용해서 ES5로 옮겨서 테스트를 해봤어요하지만 어떻게 진행해야 할지 잘 모르겠습니다.
- 생성된 /out 폴더를 파일화해 NPM에 게시합니까?
- Github repo에 결과 폴더를 포함합니까?
- 아니면 Github용 ES6 코드 + gulp 스크립트가 있는 저장소와 NPM용으로 transfiled 결과 + tests가 있는 저장소 두 개를 유지해야 합니까?
간단히 말해서, ES6로 작성된 모듈을 NPM에 게시하는 동시에 사람들이 원래 코드를 탐색/포크할 수 있도록 하려면 어떤 단계를 거쳐야 합니까?
까지 본 파일을 es6에 입니다.src에서 npm으로 당신의 .lib디렉토리입니다.
무시하는 .합니다.src에 lib.
호세의 대답이 마음에 듭니다.이미 여러 모듈이 이 패턴을 따르고 있다는 것을 알게 되었습니다.Babel6로 쉽게 구현할 수 있는 방법은 다음과 같습니다.합니다.babel-cli글로벌 바벨 버전을 변경해도 빌드가 손상되지 않도록 로컬에서 확인할 수 있습니다.
.npm 무시
/src/
.git ignore
/lib/
/node_modules/
바벨 설치
npm install --save-dev babel-core babel-cli babel-preset-es2015
꾸러미제이손
{
"main": "lib/index.js",
"scripts": {
"prepublish": "babel src --out-dir lib"
},
"babel": {
"presets": ["es2015"]
}
}
TL;DR - 2019년 10월까지 하지 마십시오.Node.js 모듈 팀은 다음과 같은 질문을 했습니다.
[2019년 10월]까지 Node.js에서 사용할 ES 모듈 패키지를 게시하지 마십시오.
2019년 5월 업데이트
이 질문을 받은 2015년 이후 모듈에 대한 JavaScript 지원은 상당히 성숙했으며 2019년 10월에는 공식적으로 안정적일 것으로 기대하고 있습니다.다른 모든 답변은 이제 구식이거나 지나치게 복잡합니다.다음은 현재 상황과 모범 사례입니다.
ES6 지원
ES6(2015년)의 99%가 버전 6 이후로 노드에서 지원되고 있습니다.노드의 현재 버전은 12입니다.모든 에버그린 브라우저는 대부분의 ES6 기능을 지원합니다.ECMA스크립트는 현재 2019년 버전이며, 버전 체계는 이제 년을 사용하는 것을 선호합니다.
브라우저의 ES 모듈(일명 ECMA스크립트 모듈)
모든 에버그린 브라우저는 import-ing ES6 모듈 2017년 이후.동적 가져오기는 Chrome(+Opera 및 Samsung Internet과 같은 포크) 및 Safari에서 지원됩니다.파이어폭스 지원은 다음 버전인 67로 예정되어 있습니다.
모듈을 로드하는 데 더 이상 웹 팩/롤업/파우셀 등이 필요하지 않습니다.다른 용도로도 유용할 수 있지만 코드를 로드하는 데는 필요하지 않습니다.ES 모듈 코드를 가리키는 URL을 직접 가져올 수 있습니다.
노드의 ES 모듈
모듈ES 모듈).mjs가 있는 파일:import/export는 calling )을통해 .5. Node v8.5.0은 를 지원합니다.node--experimental-modulesflag. v12는 supportflag. 2019년 4월 Node v12를 했습니다.가장 눈에 띄는 변경 사항은 다음을 가져올 때 파일 확장명을 기본적으로 지정해야 한다는 것입니다.
// 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 릴리스는 Modules Team이 개발자에게 Node.js가 사용할 ES 모듈 패키지를 두 패키지를 모두 통해 사용할 수 있는 솔루션을 찾을 때까지 게시하지 말라고 요청한 경우이기도 합니다.require('pkg')그리고.import 'pkg'브라우저용 네이티브 ES 모듈은 계속 게시할 수 있습니다.
기본 ES 모듈의 에코시스템 지원
2019년 5월 현재 ES 모듈에 대한 생태계 지원은 미숙합니다.예를 들어 Jest 및 Ava와 같은 테스트 프레임워크는 지원하지 않습니다.--experimental-modulesimport를 .import { symbol }하지 않음)및구문(""npm 파일")import Package from 'package'Babel이 TypeScript(graphql-tools, node-influx, fast 등)로 작성된 패키지에 대해 구문 분석할 때는 작동하지 않습니다.그러나 두 가지 모두에서 작동하는 해결 방법이 있습니다.--experimental-modules그리고 Babel이 Jest/Ava/Mocha 등을 사용하여 테스트할 수 있도록 코드를 transfile한 경우:
import * as ApolloServerM from 'apollo-server'; const ApolloServer = ApolloServerM.default || ApolloServerM;
확실히 못생겼지만, 이 방법으로 당신은 당신 자신의 ES 모듈 코드를 쓸 수 있습니다.import/export로실니다로 합니다.node --experimental-modules트랜스파일러 없이.아직 ESM이 준비되지 않은 종속성이 있는 경우 위와 같이 가져오면 Babel을 통해 테스트 프레임워크 및 기타 툴링을 사용할 수 있습니다.
질문에 대한 이전 답변 - 노드가 요구 사항/수입 문제를 해결할 때까지(가능하면 2019년 10월경) 이 작업을 수행하지 마십시오.
이전 버전과 호환되는 ES6 모듈을 npm에 게시하는 중
.org 에 다른 없이 수 ES npmjs.org 을 만 하면 .main의 package.json에▁.mjs파일(확장자는 생략):
{
"name": "mjs-example",
"main": "index"
}
그것이 유일한 변화입니다.확장자를 생략하면 --experimental-modules로 실행할 경우 노드가 먼저 mjs 파일을 찾습니다.그렇지 않으면 .js 파일로 되돌아가기 때문에 이전 노드 버전을 지원하는 기존 변환 프로세스는 이전과 같이 작동합니다. 단지 Babel이 다음을 가리키도록 하십시오..mjs줄을 서다
NPM에 게시한 Node < 8.5.0에 대한 하위 호환성을 갖춘 네이티브 ES 모듈의 소스입니다.바벨이나 다른 것 없이 지금 바로 사용할 수 있습니다.
모듈을 설치합니다.
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...');
--experimental-modules 플래그를 사용하여 노드(v8.5.0+)를 실행합니다.
node --experimental-modules test.mjs
타입스크립트
TypeScript에서 개발하는 경우 ES6 코드를 생성하고 ES6 모듈을 사용할 수 있습니다.
tsc index.js --target es6 --modules es2015
그런 다음 이름을 변경해야 합니다.*.js을 의출력으로 합니다..mjs곧 해결될 수 있는 알려진 문제.tsc 출력 캔력.mjs파일을 직접 저장합니다.
@조제 말이 맞아요.ES6/하는 것은 문제가 를 사용하는 이 웹할 수 를 들어,이 ES6/ES2015를 하기 때문입니다.node_modules를 하는 동안 babel수행상의 이유로
그니까그냥을 요.gulp,grunt하여 Node.js를 .libES5 폴더입니다.
제 여기내입니다.build-lib.js스크립트, 내가 보관하고 있습니다../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).
Jose와 Marius 접근방년식따라에의포함의트업데 (2019년) : 의 "JavaScript"로.prepublish스크립트를 작성하고 lib 디렉토리로 출력합니다.
.npm 무시
/src
.git ignore
/lib
/node_modules
Babel 설치(이 경우 버전 7.5.5)
$ npm install @babel/core @babel/cli @babel/preset-env --save-dev
꾸러미제이손
{
"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"
]
}
}
그리고 나는 그렇게 했다.src/index.js화살표 기능을 사용합니다.
"use strict";
let NewOneWithParameters = (a, b) => {
console.log(a + b); // 30
};
NewOneWithParameters(10, 20);
이제 패키지를 게시할 수 있습니다.
$ npm publish
...
> latest-js-to-npm@1.0.0 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그리고.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/**"
})
]
};
마지막으로 업데이트prepublishpackage.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
매우 간단한 작은 오픈 소스 노드 모듈에서 이 기능이 작동하는 것을 보려면 nth-day(내가 시작한 다른 기여자)를 살펴보십시오.소포 안을 보세요.json 파일 및 사전 게시 단계에서 이 작업을 수행하는 위치와 방법을 안내합니다.해당 모듈을 복제하면 로컬에서 실행하여 사용자를 위한 템플릿으로 사용할 수 있습니다.
Node.js 13.2.0+는 실험 플래그 없이 ESM을 지원하며 하이브리드(ESM 및 공통)를 게시할 수 있는 몇 가지 옵션이 있습니다.JS) NPM 패키지(필요한 하위 호환성 수준에 따라 다름): https://2ality.com/2019/10/hybrid-npm-packages.html
패키지를 보다 쉽게 사용할 수 있도록 완전한 이전 버전과의 호환성을 권장합니다.이는 다음과 같습니다.
하이브리드 패키지의 파일은 다음과 같습니다.
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"
}
공통에서 가져오기JS:
const {x} = require('mypkg');
ESM에서 가져오기:
import {x} from 'mypkg/esm';
2019년 5월에 ESM 지원에 대해 조사한 결과, 많은 라이브러리가 지원이 부족한 것으로 나타났습니다(즉, 이전 버전과의 호환성에 대한 권장 사항).
- esm 패키지의 지원이 노드의 지원과 일치하지 않아 문제가 발생합니다.
- "Builtin require는 .mjs 파일을 로드할 수 없습니다." https://github.com/standard-things/esm#loading,
- ".mjs 파일 확장자는 개발자가 상호 운용 또는 사용 편의성을 원할 때 사용할 수 있는 확장자가 되어서는 안 됩니다.그것은 실험적으로 만들어진 것이기 때문에 이용 가능하지만 완전히 구워지지 않았기 때문에 저는 그것에 대한 어떤 향상도 약속할 수 없습니다." https://github.com/standard-things/esm/issues/498#issuecomment-403655466
- ▁for다▁mo니않▁native'에 대한 네이티브 지원이 없습니다.
.mjs파일- 업데이트: 는 2020-01-13에 을 발표했습니다.
mocha@7.0.0-esm1
- 업데이트: 는 2020-01-13에 을 발표했습니다.
- 많은 저명한 프로젝트가 다음과 같은 문제를 일으켰습니다.
.mjs파일:
의주키에 있는 키package.json패키지가 게시되면 패키지의 진입점을 결정합니다.그래서 당신은 당신이 원하는 곳에 당신의 바벨의 출력물을 넣을 수 있고 단지 올바른 경로를 언급하기만 하면 됩니다.main키.키.키.키.
"main": "./lib/index.js",
다음은 npm 패키지를 게시하는 방법에 대한 잘 작성된 기사입니다.
https://codeburst.io/publish-your-own-npm-package-ff918698d450
여기 참조용으로 사용할 수 있는 샘플 레포가 있습니다.
https://github.com/flexdinesh/npm-module-boilerplate
두 패키지를 사용할 수 있다는 입니다.require( 'package' )소프트웨어 같은 것을 합니다.
이 두 가지 요건을 충족하면 원하는 것은 무엇이든지 할 수 있습니다.ES6에 모듈이 작성되어 있더라도 최종 사용자가 알 필요가 없다면 최대한의 지원을 받기 위해 일단은 파일을 변환하겠습니다.
그러나 koa와 마찬가지로 모듈이 ES6 기능을 사용하는 사용자와의 호환성을 요구한다면 두 가지 패키지 솔루션이 더 나을 수 있습니다.
테이크 어웨이
- 이 수 의 코드만 하세요.
require( 'your-package' )일하다. - ES5와 6 사이가 사용자에게 중요하지 않은 경우 패키지를 하나만 게시합니다.필요하다면 그것을 옮겨라.
게시된 모듈을 거치지 않고 Github에서 직접 자체 모듈을 사용하는 모든 사용자를 위한 몇 가지 추가 참고 사항:
(일반적으로 사용되는) "사전 게시" 후크는 사용자에게 아무런 도움이 되지 않습니다.
게시된 내용이 아닌 github reposure에 의존할 계획인 경우 가능한 최선의 방법:
- 명부를 해제하다
src.npmignore(으)로 부터.만약 당신이 가지고 있지 않다면..npmignore기억:의 사본.gitignore됩니다.ls node_modules/yourProject보여드리겠습니다. - 하게확실.
babel-cli. 이는 모듈을 입니다. 설치 후크에서 빌드 작업을 수행합니다. 예:
"install": "babel src -d lib -s"
("사전 설치"를 시도하는 데 추가 가치가 없습니다. 즉, babel-cli가 누락되었을 수 있습니다.)
모듈의 구조에 따라 이 솔루션은 작동하지 않을 수도 있지만, 모듈이 단일 파일에 포함되어 있고 종속성이 없는 경우(가져오기를 사용하지 않음) 다음 패턴을 사용하여 코드를 그대로 릴리스할 수 있으며 가져오기(Browser ES6 모듈) 및 필요(노드 공통)와 함께 가져올 수 있습니다.JS 모듈)
추가로 SCRIPT HTML 요소를 사용하여 가져오기에 적합합니다.
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-build.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};
꾸러미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!'
Browser에서 가져올 때...
import {myModule} from './my-module.js';
myModule.helloWorld();
// outputs 'Hello World!'
또는 HTML 스크립트 요소를 사용하여 포함된 경우에도...
<script src="./main.js"></script>
<script>
myModule.helloWorld();
// outputs 'Hello World!'
</script>
언급URL : https://stackoverflow.com/questions/29738381/how-to-publish-a-module-written-in-es6-to-npm
'programing' 카테고리의 다른 글
| Oracle SDO_GEOMETY에 대한 SRID를 변경하는 방법 (0) | 2023.08.01 |
|---|---|
| MySQL에서 키워드 검색을 구현하는 방법은 무엇입니까? (0) | 2023.08.01 |
| xampp에서 컬을 활성화하는 방법은 무엇입니까? (0) | 2023.08.01 |
| CSS 상자 섀도 맨 아래만 (0) | 2023.08.01 |
| Swift. Objective-c 모듈 'Alamofire'를 빌드할 수 없습니다. (0) | 2023.08.01 |