외부 라이브러리를 여러 번로드하지 않으려면 어떻게해야합니까? npm 패키지, browserify 및 스크립트 태그

Question

jquery로 작성된 단일 페이지 웹 애플리케이션이 있습니다. jquery, 다른 라이브러리 및 npm으로 생성하고 browserify 한 bundle.js를 사용합니다.

Bundle.js도 동일한 라이브러리에 따라 다릅니다.

내 아키텍처는 다음과 같이이다 :

나는 사용자가 페이지와 첫 번째 상호 작용을 할 수 있도록 몇 가지 기능을로드하는 HTML 페이지에

• - 물건
• 에 대한 검색과 같은 경우 선택 항목에 사용자가 클릭, 번들의 모듈에서 전체 앱 "환경"을 실행합니다.

예로서, I JQuery와 첫번째 부분 (예를 들어 $(document).ready(...))을 실행 <script> 통해로드되지만 JQuery와도 다발 안에 싸여해야한다.

동일한 라이브러리를 두 번 이상로드하지 않으려면 어떻게해야합니까?

<script src="jquery.js"></script> 
<script src="mylibrary.js"></script> 
.. 
</body> 
<script> 
$(document).ready(function(){ 
// here needs 
// do stuff and at a certain point call the bundle module 
mymodule.main(startMyApp) 
}) 
</script> 

이 내가 외부 모듈을 필요로하고 주요 노출하는 방식입니다 : 이것은 HTML 페이지의 구조가

/ index.js (graphic engine imported in myApp/index.js) 
/package.json 
/- myApp 
    - index.js (my module) 

입니다 :

---

이

내 응용 프로그램 폴더의 구조 myApp/index.js의 모듈 :

var jquery = require('jquery'); 
module.exports.main = function (initNode) { 

    var engine = require('../'); // will import index.js at root 

} 

var jquery = require("jquery") 

module.exports = function (graph, settings) { 

    // stuff 
} 

그리고이 browserify 명령을 내 패키지 :

{ 
    "name": "myApp", 
    "version": "1.0.0", 
    "description": "Learning npm :) ", 
    "main": "index.js", // this is the graphic engine file 
    "scripts": { 
    "test": "test.js", 
    "start": "node_modules/.bin/browserify --s mymodule ./myApp/index.js > ./myApp/bundle.js" 
    }, 
    "dependencies": { 
    "jquery": "^3.2.1", 
    // and here again jquery 
    } 
} 

Answer 1

이 나를 위해 일한 : browserify의 https://github.com/thlorenz/browserify-shim#c-config-inside-configshimjs-without-aliases

플러그인 414,이 또한 여기에 나는 JQuery와 가져, 엔진입니다 . 다음과 같이 package.json을 수정 한 다음 html에서 전역 스크립트를 가져올 수 있습니다.

{ 
    "name": "myApp", 
    "version": "1.0.0", 
    "description": "Yeeeh", 
    "main": "index.js", 
    "scripts": { 
    "test": "test.js", 
    "start": "node_modules/.bin/browserify --s myAppModule ./myApp/index.js > ./myApp/bundle.js" 
    }, 
    "author": "you", 
    "dependencies": { 
    // my local dep 
    }, 
    "devDependencies": { 
    "browserify-shim": "^3.8.14" 
    }, 
    "browserify": { 
    "transform": [ 
     "browserify-shim" 
    ] 
    }, 
    "browserify-shim": { 
    "jquery": "global:$", 
    // libraries from <script> html 
    } 
}