bower init-amd, es6, globals 및 node의 차이점

첫 번째 Bower 구성 요소를 작성 중입니다. bower init스크립트를 실행 한 후 '이 패키지는 어떤 유형의 모듈을 노출합니까?' 이 옵션으로 :

• AMD
• es6
• 글로벌
• 마디

이 옵션의 차이점은 무엇입니까?

당신이 모른다면, 그것은 아마도 전 세계가 당신에게 정답 일 것입니다.

어느 쪽이든, 당신은 이해해야합니다 :

• AMD 란 무엇이며 왜
• nodejs 모듈이란 무엇입니까
• ECMAScript 6, 특히 es6 모듈이란 무엇입니까

[최신 정보]

이 기능은 최근에 bower에서 도입되었으며 아직 문서화되지 않았습니다 (AFAIK). 기본적으로 moduleType패키지를 사용하는 모듈 기술에 대해 설명합니다 (위 참조).

현재 는 패키지 파일 에서 moduleType속성 을 설정하는 것 외에는 아무런 영향을 미치지 않습니다 bower.json.

원래 풀 요청에 대해서는 https://github.com/bower/bower/pull/934 를 참조 하십시오 .

[업데이트 # 2]

의견에 대한 몇 가지 추가 사항 :

• 현재 AFAIK는 moduleType부동산 에 대한 검증이 없습니다. 즉, 사람들이 기술적으로 원하는 angularjs경향이있는 것을 포함하여 원하는 값을 기술적으로 사용할 수 있습니다.
• 이물위원회는 추가의 포함을 향해 치열하지 않을 것으로 보인다 non-interoperable/proprietary moduleTypes(생각 작곡가, 각도 등) - 쉽게 이해할 수 있지만, 다시 한번, 아무 것도 정말 사용하는 사람들을 방해하지 않습니다 moduleType그들이 원하는 값을
• 이전에 대한 예외는 (일부) 최근에 포함 된 yui moduleType것이므로, 공동 계획의 일부 라고 가정하면 "예외"가 발생합니다.

목록에없는 패키지 관리자 용 패키지를 작성하여 bower에 게시하려면 어떻게해야합니까?

es6 모듈을 작성하고 / patch es6-transpiler 를 사용하여 필요한 패키지 형식을 출력합니다. 그런 다음 중 하나를 수행합니다.

• 내 패키지 기술을 선택 사항으로 포함하도록 정자에게 탄원합니다 (es6 트랜스 필러가 대상으로 지원한다는 사실을 바탕으로)
• es6 모듈 버전과 변환 된 XXX 버전을 포함하여 내 패키지를 게시 es6하고moduleType

면책 조항 : angularjs 모듈을 작성하는 실제 경험이 없습니다.

머리 글자

나는 bower init처음으로도 사용 하고 있습니다.

옵션은 일부 JavaScript 코드를 모듈화하는 다양한 방법을 참조해야합니다.

• amd : definerequirejs와 같은 AMD 사용
• node : Node.js 사용 require.
• globals : JavaScript 모듈 패턴을 사용하여 전역 변수를 노출하십시오 (예 : window.JQuery).
• es6 : 향후 EcmaScript6 모듈 기능 사용

필자의 경우 Node.js 모듈 dflow 를 작성했지만 browserify를 사용하여 전역 dflow var 를 내보내는 dist / dflow.js 파일 을 만듭니다 . 그래서 globals를 선택했습니다 .

다른 업데이트

사용되는 명령 나는 browserify하는 dflow A와 윈도우 전역 객체가 있었다

browserify -s dflow -e index.js -o dist/dflow.js

브라우저 내부에서도 require 를 사용하는 것을 선호하므로 변경했습니다.

browserify -r ./index.js:dflow -o dist/dflow.js

그래서 bower.json 파일 에서 bower.moduleType 을 node 로 변경했습니다 .

주요 동기는 모듈 이름에 대시 (예 : 프로젝트 flow-view )가 있으면 flowView 에서 전역 이름 을 camelize 해야 한다는 것 입니다.

이 새로운 접근 방식에는 두 가지 다른 이점이 있습니다.

1. 노드와 브라우저 인터페이스는 동일합니다. 클라이언트 측과 서버 측 모두에서 require 를 사용 하여 코드 예제를 한 번만 작성하고 두 컨텍스트에서 쉽게 재사용 할 수 있습니다.
2. npm 스크립트를 사용하므로 ${npm_package_name}변수를 활용하고 브라우저 화에 사용하는 스크립트를 한 번 쓸 수 있습니다 .

이것은 또 다른 주제이지만, 후자의 이점이 얼마나 유용한 지 고려할 가치가 있습니다. npm.scripts.browserify내 패키지 에서 사용 하는 속성을 공유하겠습니다.

"browserify": "browserify -r ./index.js:${npm_package_name} -o dist/${npm_package_name}.js"

참고로, 이것은 모듈 유형과 관련하여 bower가 지정한 것입니다.

mainJavaScript 파일에 정의 된 모듈의 유형입니다 . 다음 문자열 중 하나 또는 배열 일 수 있습니다.

• globals: 사용, 글로벌 네임 스페이스에 추가 자바 스크립트 모듈 window.namespace또는 this.namespace구문
• amd: 구문을 사용하여 RequireJS 와 같은 AMD와 호환되는 JavaScript 모듈define()
• node: 구문을 사용하여 노드 및 CommonJS 와 호환되는 JavaScript 모듈module.exports
• es6: 호환 스크립트 모듈 ECMAScript를 6 모듈을 사용 export하고 import구문
• yui: 구문을 사용하여 YUI 모듈 과 호환되는 JavaScript 모듈YUI.add()

관련 링크 : https://github.com/bower/spec/blob/master/json.md#moduletype