Browserify-브라우저에서 browserify를 통해 생성 된 파일에 번들 된 함수를 호출하는 방법

Browserify-브라우저에서 browserify를 통해 생성 된 파일에 번들 된 함수를 호출하는 방법

---

나는 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를 사용하면 일부 노드 기능을 클라이언트 측에서 사용할 수 있지만 번들 스크립트 자체에서만 사용할 수 있습니다 . 클라이언트 측 어디에서나 가져 와서 사용할 수있는 독립형 모듈을 만드는 것이 아닙니다. 이것이 바로 번들 컨텍스트 외부에서 단일 함수를 호출하기 위해이 모든 추가 문제를 해결해야하는 이유입니다.

---

--standalone매개 변수 또는 Google "browserify umd"에 대한 browserify의 README.md를 읽어 보세요.

---

나는 대답을 읽었고 아무도 전역 변수 범위의 사용을 언급하지 않은 것 같습니다. node.js와 브라우저에서 동일한 코드를 사용하려는 경우 유용합니다.

class Test
{
  constructor()
  {
  }
}
global.TestClass = Test;

그러면 어디에서나 TestClass에 액세스 할 수 있습니다 .

<script src="bundle.js"></script>
<script>
var test = new TestClass(); // Enjoy!
</script>

참고 : TestClass는 모든 곳에서 사용할 수 있습니다. window 변수를 사용하는 것과 같습니다.

또한 클래스를 전역 범위에 노출하는 데코레이터를 만들 수 있습니다. 정말 훌륭하지만 변수가 정의 된 위치를 추적하기 어렵습니다.

---

몇 가지 옵션이 있습니다.

1. 플러그인 browserify-bridge 가 모듈을 생성 된 항목 모듈로 자동 내보내도록합니다. 이는 내보내는 내용을 수동으로 따라갈 필요가없는 SDK 프로젝트 또는 상황에 유용합니다.

2. 롤업 노출을 위해 의사 네임 스페이스 패턴을 따릅니다.

먼저 폴더에 대한 색인 조회를 활용하여 다음과 같이 라이브러리를 정렬합니다.

/src
--entry.js
--/helpers
--- index.js
--- someHelper.js
--/providers
--- index.js
--- someProvider.js
...

이 패턴을 사용하여 다음과 같은 항목을 정의합니다.

exports.Helpers = require('./helpers');
exports.Providers = require('./providers');
...

Notice the require automatically loads the index.js from each respective sub-folder

In your subfolders, you can just include a similar manifest of the available modules in that context:

exports.SomeHelper = require('./someHelper');

This pattern scales really well and allows for contextual (folder by folder) tracking of what to include in the rolled-up api.

---

it takes me a while figure out and understand this issue even with these answers

it's really simple - it's about wrapping

for this purpose I'll assume you have only 1 script for whole app {{app_name}}

1 alternative

add function to object "this"

function somefunction(param) {}
->
this.somefunction = function(param) {}

then you have to name that object to be available - you will do it add param "standalone with name" like others advised

so if you use "watchify" with "browserify" use this

var b = browserify({
    ...
    standalone: '{{app_name}}'
});

or command line

browserify index.js --standalone {{app_name}} > index-bundle.js

then you can call your function from browser

app_name.somefunction(param);
window.app_name.somefunction(param);

2 alternative

add function to object "window"

function somefunction(param) {}
->
window.somefunction = function(param) {}

then you can call your function from browser

somefunction(param);
window.somefunction(param);

--

maybe I help someone

---

To have your function available from both the HTML and from server-side node:

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>

Run:

npm install uniq
browserify main.js > bundle.js

and you should get same results when opening main.html in a browser as when running

node main.js

---

For debugging purposes I added this line to my code.js:

window.e = function(data) {eval(data);};

Then I could run anything even outside the bundle.

e("anything();");

---

window.LogData =function(data){
   return unique(data);
};

Call the function simply by LogData(data)

This is just a slight modification to thejh's answer but important one

참고URL : https://stackoverflow.com/questions/23296094/browserify-how-to-call-function-bundled-in-a-file-generated-through-browserify