npm에서 모듈을 독립형 AMD/CommonJS 모듈로 가져 오는 방법

Question

그래서 Node 또는 WebPack 서버 사이드를 사용하지 않지만 npm의 모듈을 사용하고 싶습니다. 내 고객 측에서는 requirej를 사용하기 때문에 AMD (선호) 또는 CommonJS에 모듈이 필요합니다.

내가 원하는 것은 인수로 모듈 이름 + "외부 종속성"을 취하고 다른 모든 deps를 포함하는 모듈을 만드는 스크립트입니다.

예.

sh npmtoamd.sh draft-js react react-dom 

draft-j와 반응 및 반응 - 돔을 제외한 모든 종속성을 포함하는 ES5 AMD 모듈을 생성합니다. 예를 들면 불가능한 경우. css 파일과 기타 non-js 콘텐츠를 모듈에 포함시켜 예를 들어 제공하십시오. draft-js.css는 용인 할 수 있습니다.

Node 또는 Webpack 서버 측을 사용하지는 않지만 상기 스크립트에서 npm 및 webpack을 사용할 수 있습니다.

npm에서 모듈을 가져 오는 것은 쉬운 일은 아니지만 webpack 부분을 수행하는 방법이 매우 분실했습니다. 나는 그것이 가능하다는 사실을 안다. 내가 이전에 도움을 받으면서 그것을 할 수 있었으므로, 어디서나 그것을 가지지 않고 그것이 어떻게되었는지 모른다.

Answer 1

나는 일을 가지고 마지막으로 NPM 대신 배치 스크립트의 자바 말았 인출하고 결국합니다. 그러나 작동하도록 browserify하지 않았다.

내가 할 Heres는 무엇을 다음 webpack.config을 만드는

1. .JS

   module.exports = { 
       entry: './main.js', 
       output: { 
       filename: 'bundle.js', 
       library:"<modulename>", 
       libraryTarget:"amd"  
   }, 
   externals: { 
   
        react: "React", 
       "react-dom": "ReactDOM", 
       immutable:"Immutable", 
       moment:"Moment" 
       } 
   
   }; 
   

2. npm install <modulename>

3. 는 browserify을 webpack main.js

Answer 2

나는 elmigranto가 주석을 달았으며, Browserify가 당신이 찾고있는 것이라고 생각합니다. 이름과는 달리 브라우저 환경과 노드 환경 모두에서 사용할 수 있습니다. 간단히 말해서 다음과 같습니다.

브라우저 화는 소스 코드의 추상 구문 트리에 대한 정적 분석을 사용하여 찾은 require() 호출을 검색하고 필요한 require() 호출을 검색합니다.

문자열을 포함하는 모든 require() 호출에 대해 browserify는 해당 모듈 문자열을 파일 경로로 분석 한 다음 전체 종속성 그래프가 방문 할 때까지 require() 호출에 대한 파일 경로를 재귀 적으로 검색합니다.

각 파일은 정적으로 확인 된 이름을 내부 ID에 매핑하는 최소한의 require() 정의가있는 단일 javascript 파일로 연결됩니다.

이것은 생성하는 번들이 완전히 독립적이며 응용 프로그램이 무시할 수있는 오버 헤드로 작업해야하는 모든 것을 갖추고 있음을 의미합니다.

demos의 일부를 확인하면 모든 종속성 (및 해당 종속성)이 하나의 파일로 묶여 있음을 알 수 있습니다.
간단한 예 : deamdify를 사용하여뿐만 아니라 Browserify supports it AMD를 사용에 관해서

browserify main.js -o bundle.js 

.
사용하여 AMD 모듈 :

browserify -t deamdify main.js -o bundle.js