나는 nodejs와 browserify를 처음 사용합니다. 나는이 링크로 시작했다 .
이 코드가 포함 된 main.js 파일이 있습니다.
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
this.LogData =function(){
console.log(unique(data));
};
이제 npm으로 uniq 모듈을 설치합니다.
npm install uniq
그런 다음 main.js에서 시작하는 모든 필수 모듈을 browserify 명령을 사용하여 bundle.js라는 단일 파일로 묶습니다.
browserify main.js -o bundle.js
생성 된 파일은 다음과 같습니다.
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
this.LogData =function(){
console.log(unique(data));
};
},{"uniq":2}],2:[function(require,module,exports){
"use strict"
function unique_pred(list, compare) {
var ptr = 1
, len = list.length
, a=list[0], b=list[0]
for(var i=1; i<len; ++i) {
b = a
a = list[i]
if(compare(a, b)) {
if(i === ptr) {
ptr++
continue
}
list[ptr++] = a
}
}
list.length = ptr
return list
}
function unique_eq(list) {
var ptr = 1
, len = list.length
, a=list[0], b = list[0]
for(var i=1; i<len; ++i, b=a) {
b = a
a = list[i]
if(a !== b) {
if(i === ptr) {
ptr++
continue
}
list[ptr++] = a
}
}
list.length = ptr
return list
}
function unique(list, compare, sorted) {
if(list.length === 0) {
return []
}
if(compare) {
if(!sorted) {
list.sort(compare)
}
return unique_pred(list, compare)
}
if(!sorted) {
list.sort()
}
return unique_eq(list)
}
module.exports = unique
},{}]},{},[1])
내 index.htm 페이지에 bundle.js 파일을 포함시킨 후 logData 함수를 어떻게 호출합니까?
답변
기본적으로 browserify는 브라우저 화 된 코드 외부에서 모듈에 액세스하는 것을 허용하지 않습니다. 브라우저 화 된 모듈에서 코드를 호출하려면 모듈과 함께 코드를 브라우저 화해야합니다. 이에 대한 예는 http://browserify.org/ 를 참조하십시오 .
물론 다음과 같이 외부에서 메서드에 액세스 할 수 있도록 명시 적으로 만들 수도 있습니다.
window.LogData =function(){
console.log(unique(data));
};
그런 다음 LogData()
페이지의 다른 곳에서 전화 를 걸 수 있습니다.
답변
Browserify와 함께 독립형 모듈을 번들링하는 핵심 부분은 --s
옵션입니다. 노드를 module.exports
전역 변수로 사용하여 모듈에서 내보내는 모든 것을 노출 합니다. 그런 다음 파일을 <script>
태그에 포함 할 수 있습니다 .
어떤 이유로 해당 전역 변수를 노출해야하는 경우에만이 작업을 수행하면됩니다. 제 경우 클라이언트는이 Browserify 비즈니스에 대해 걱정할 필요없이 웹 페이지에 포함될 수있는 독립형 모듈이 필요했습니다.
다음 --s
은 인수와 함께 옵션을 사용하는 예 입니다 module
.
browserify index.js --s module > dist/module.js
그러면 모듈이라는 전역 변수로 노출됩니다 module
.
소스 .
업데이트 :
@fotinakis 덕분입니다. 통과하고 있는지 확인하십시오 --standalone your-module-name
. --standalone
인수를받는 것을 잊은 경우 Browserify는 찾을 수 없기 때문에 빈 모듈을 자동으로 생성 할 수 있습니다.
이것이 시간을 절약하기를 바랍니다.
답변
Browserify 의 독립형 옵션에 대한 @Matas Vaitkevicius의 대답 은 정확합니다 (@thejh의 창 전역 변수를 사용하는 대답 도 작동하지만 다른 사람들이 지적했듯이 전역 네임 스페이스를 오염시켜 이상적이지 않습니다). 독립형 옵션을 사용하는 방법에 대해 좀 더 자세히 설명하고 싶었습니다.
번들링하려는 소스 스크립트에서 module.exports를 통해 호출하려는 함수를 노출해야합니다. 클라이언트 스크립트에서 <bundle-name>. <func-name>을 통해 이러한 노출 된 함수를 호출 할 수 있습니다 . 예를 들면 다음과 같습니다.
내 소스 파일 src / script.js 는 다음과 같습니다.
module.exports = {myFunc: func};
내 browserify 명령 은 다음과 같습니다.
browserify src/script.js --standalone myBundle > dist/bundle.js
그리고 내 클라이언트 스크립트 dist / client.js 는 번들 스크립트를로드
<script src="bundle.js"></script>
한 다음 다음과 같이 노출 된 함수를 호출합니다.
<script>myBundle.myFunc();</script>
노출 된 함수를 호출하기 전에 클라이언트 스크립트에서 번들 이름을 요구할 필요 가 없습니다. 예를 들어 필요하지 않으며 작동하지 않습니다.<script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script>
실제로 독립 실행 형 모드없이 browserify에서 번들로 제공하는 모든 함수와 마찬가지로 require 함수는 번들 스크립트 외부에서 사용할 수 없습니다 . Browserify를 사용하면 일부 노드 기능을 클라이언트 측에서 사용할 수 있지만 번들 스크립트 자체에서만 사용할 수 있습니다 . 클라이언트 측 어디에서나 가져 와서 사용할 수있는 독립형 모듈을 만드는 것이 아닙니다. 이것이 바로 번들 컨텍스트 외부에서 단일 함수를 호출하기 위해이 모든 추가 문제를 해결해야하는 이유입니다.
답변
나는 대답을 읽었고 아무도 전역 변수 범위의 사용을 언급하지 않은 것 같습니다. node.js와 브라우저에서 동일한 코드를 사용하려는 경우 유용합니다.
class Test
{
constructor()
{
}
}
global.TestClass = Test;
그런 다음 어디에서나 TestClass에 액세스 할 수 있습니다 .
<script src="bundle.js"></script>
<script>
var test = new TestClass(); // Enjoy!
</script>
참고 : TestClass는 모든 곳에서 사용할 수 있습니다. window 변수를 사용하는 것과 같습니다.
또한 클래스를 전역 범위에 노출하는 데코레이터를 만들 수 있습니다. 정말 훌륭하지만 변수가 정의 된 위치를 추적하기 어렵습니다.
답변
--standalone
매개 변수 또는 Google “browserify umd”에 대한 browserify의 README.md를 읽어 보세요.
답변
HTML과 서버 측 노드 모두에서 함수를 사용할 수 있도록하려면 :
main.js :
var unique = require('uniq');
function myFunction() {
var data = [1, 2, 2, 4, 3];
return unique(data).toString();
}
console.log ( myFunction() );
// When browserified - we can't call myFunction() from the HTML, so we'll externalize myExtFunction()
// On the server-side "window" is undef. so we hide it.
if (typeof window !== 'undefined') {
window.myExtFunction = function() {
return myFunction();
}
}
main.html :
<html>
<head>
<script type='text/javascript' src="bundle.js"></script>
<head>
<body>
Result: <span id="demo"></span>
<script>document.getElementById("demo").innerHTML = myExtFunction();</script>
</body>
</html>
운영:
npm install uniq
browserify main.js > bundle.js
브라우저에서 main.html을 실행할 때와 동일한 결과를 얻을 수 있습니다.
node main.js
답변
최소 실행 가능 예
이것은 기본적으로 https://stackoverflow.com/a/43215928/895245 와 동일 하지만 직접 실행하고 쉽게 재현 할 수있는 구체적인 파일이 있습니다.
이 코드는 https://github.com/cirosantilli/browserify-hello-world 에서도 확인할 수 있습니다.
index.js
const uniq = require('uniq');
function myfunc() {
return uniq([1, 2, 2, 3]).join(' ');
}
exports.myfunc = myfunc;
index.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Browserify hello world</title>
</head>
<body>
<div id="container">
</body>
</div>
<script src="out.js"></script>
<script>
document.getElementById('container').innerHTML = browserify_hello_world.myfunc();
</script>
</html>
Node.js 사용법 :
#!/usr/bin/env node
const browserify_hello_world = require('./index.js');
console.log(browserify_hello_world.myfunc());
out.js
브라우저 사용을 위해 생성 :
npx browserify --outfile out.js --standalone browserify_hello_world index.js
브라우저와 명령 줄 모두 예상되는 출력을 표시합니다.
1 2 3
Browserify 16.5.0, Node.js v10.15.1, Chromium 78, Ubuntu 19.10으로 테스트되었습니다.
