클라이언트 측의 JavaScript require ()
require()클라이언트 측에서 (또는 비슷한 것을) 사용할 수 있습니까?
예
var myClass = require('./js/myclass.js');
이를 위해 require.js 또는 head.js 를 살펴 봐야 합니다.
나는 그것을 위해 browserify 를 사용하고 있습니다. 또한 Node.js 모듈을 클라이언트 측 코드에 통합 할 수 있습니다.
나는 여기에 그것에 대해 블로그했다 : browserify를 사용하여 클라이언트 측 JavaScript에 node.js / CommonJS 스타일 require () 추가
Node.js 스타일을 원한다면 require다음과 같이 사용할 수 있습니다.
var require = (function () {
var cache = {};
function loadScript(url) {
var xhr = new XMLHttpRequest(),
fnBody;
xhr.open('get', url, false);
xhr.send();
if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
cache[url] = (new Function(fnBody)).call({});
}
}
function resolve(module) {
//TODO resolve urls
return module;
}
function require(module) {
var url = resolve(module);
if (!Object.prototype.hasOwnProperty.call(cache, url)) {
loadScript(url);
}
return cache[url];
}
require.cache = cache;
require.resolve = resolve;
return require;
}());
주의 :이 코드는 작동하지만 불완전하며 (특히 URL 확인) 모든 Node.js 기능을 구현하지 않습니다 (어젯밤에이 코드를 정리했습니다). 실제 앱 에서이 코드 를 사용해서는 안되지만 시작점을 제공합니다. 이 간단한 모듈로 테스트했으며 작동합니다.
function hello() {
console.log('Hello world!');
}
exports.hello = hello;
나는 나 자신에게 똑같은 질문을했다. 그것을 살펴 보았을 때 나는 선택이 압도적이라는 것을 알았습니다.
다행히도 요구 사항에 따라 최상의 로더를 선택하는 데 도움이되는이 훌륭한 스프레드 시트를 찾았습니다.
https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ
requirejs 프로젝트를 살펴보십시오 .
일반적으로 컴파일 타임에 스크립트를 전처리하고 컴파일 타임에 require"경량 shim"으로 다시 작성되는 하나의 (또는 매우 적은) 패키지로 묶는 것이 좋습니다 .
나는 그것을 할 수 있어야하는 "새로운"도구를 따라 구글 검색했습니다
그리고 이미 언급 한 것 browserify역시 아주 잘 맞아야합니다-http: //esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/
모듈 시스템은 무엇입니까?
이전 스택 오버플로 설명 -CommonJS, AMD 및 RequireJS 간의 관계?
(가) 상세 다양한 모듈 프레임 워크의 논의와
require()그들이 필요에 쓰기 모듈 형 자바 스크립트와 AMD, CommonJS & ES 하모니 - 애디 오스 마니
항목을로드하는 DOM에 요소를 만들 수 있습니다.
다음과 같이 :
var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file
간단히 Browserify를 사용하면 파일이 프로덕션에 들어가기 전에 파일을 처리하고 파일을 번들로 압축하는 컴파일러와 같은 것입니다.
프로젝트의 파일이 필요한 main.js 파일이 있다고 생각하면 browserify를 실행할 때 모든 파일을 처리하고 모든 파일과 함께 번들을 생성하여 requireHTTP 요청없이 브라우저에서 동기식으로 호출을 사용할 수 있습니다. 예를 들어 성능 및 번들 크기에 대한 오버 헤드가 거의 없습니다.
자세한 정보는 http://browserify.org/ 링크를 참조하십시오.
일부 답변은 이미 있지만 YUI3 및 주문형 모듈로드에 대해 알려 드리고자합니다. 서버 (node.js)와 클라이언트에서도 작동합니다. 클라이언트 나 서버에서 정확히 동일한 JS 코드를 사용하여 페이지를 빌드하는 데모 웹 사이트가 있지만 이는 또 다른 주제입니다.
YUI3 : http://developer.yahoo.com/yui/3/
동영상 : http://developer.yahoo.com/yui/theater/
예:
(전제 조건 : 7k yui.js의 기본 YUI3 함수가로드되었습니다)
YUI({
//configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
//sandboxed application code
//...
//If you already have a "Y" instance you can use that instead
//of creating a new (sandbox) Y:
// Y.use('moduleX','moduleY', function (Y) {
// });
//difference to YUI().use(): uses the existing "Y"-sandbox
}
이 코드는 YUI3 모듈 "node"및 "io"와 모듈 "own-app-module1"을로드 한 다음 콜백 함수가 실행됩니다. 모든 YUI3 및 own-app-module1 함수가 포함 된 새 샌드 박스 "Y"가 생성됩니다. 전역 네임 스페이스에 아무 것도 나타나지 않습니다. 모듈 (.js 파일)로드는 YUI3 로더에 의해 처리됩니다. 또한로드 할 모듈의 -debug 또는 -min (ified) 버전을 선택하기 위해 (선택 사항, 여기에 표시되지 않음) 구성을 사용합니다.
다음은 매우 다른 접근 방식을 취하는 솔루션입니다. 모든 모듈을 JSON 개체로 패키징하고 추가 요청없이 파일 콘텐츠를 읽고 실행하여 모듈을 요구합니다.
https://github.com/STRd6/require/blob/master/main.coffee.md
STRd6 / require 는 런타임에 JSON 패키지를 사용할 수 있는지에 따라 다릅니다. require함수는 해당 패키지를 생성한다. 패키지에는 앱에 필요할 수있는 모든 파일이 포함되어 있습니다. 패키지가 모든 종속성을 번들로 제공하므로 더 이상 http 요청이 작성되지 않습니다. 이것은 클라이언트에서 요구하는 Node.js 스타일에 가장 가깝습니다.
패키지의 구조는 다음과 같습니다.
entryPoint: "main"
distribution:
main:
content: "alert(\"It worked!\")"
...
dependencies:
<name>: <a package>
노드와 달리 패키지는 외부 이름을 모릅니다. 이름을 지정하는 것은 종속성을 포함하여 pacakge에 달려 있습니다. 이것은 완전한 캡슐화를 제공합니다.
여기에 모든 설정이 주어지면 패키지 내에서 파일을로드하는 함수가 있습니다.
loadModule = (pkg, path) ->
unless (file = pkg.distribution[path])
throw "Could not find file at #{path} in #{pkg.name}"
program = file.content
dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)
module =
path: dirname
exports: {}
context =
require: generateRequireFn(pkg, module)
global: global
module: module
exports: module.exports
PACKAGE: pkg
__filename: path
__dirname: dirname
args = Object.keys(context)
values = args.map (name) -> context[name]
Function(args..., program).apply(module, values)
return module
이 외부 컨텍스트는 모듈이 액세스 할 수있는 일부 변수를 제공합니다.
require가 다른 모듈을 필요로 할 수 있도록 기능을 모듈에 노출되어있다.
Additional properties such as a reference to the global object and some metadata are also exposed.
Finally we execute the program within the module and given context.
This answer will be most helpful to those who wish to have a synchronous node.js style require statement in the browser and are not interested in remote script loading solutions.
I find the component project giving a much more streamlined workflow than other solutions (including require.js), so I'd advise checking out https://github.com/component/component . I know this is a bit late answer but may be useful to someone.
Here's a light weight way to use require and exports in your web client. It's a simple wrapper that creates a "namespace" global variable, and you wrap your CommonJS compatible code in a "define" function like this:
namespace.lookup('org.mydomain.mymodule').define(function (exports, require) {
var extern = require('org.other.module');
exports.foo = function foo() { ... };
});
More docs here:
https://github.com/mckoss/namespace
The clientside-require library provides an asynchronous load() function that can be used to load any JS file or NPM module (which uses module.exports), any .css file, any .json, any .html, any any other file as text.
e.g., npm install clientside-require --save
<script src = '/node_modules/clientside-require/dist/bundle.js'></script>
<script>
load('color-name') // an npm module
.then(color_name=>{
console.log(color_name.blue); // outputs [0, 0, 255]
})
</script>
A really cool part of this project is that inside of any load()ed script, you can use the synchronous require() function the same way you would expect in node.js!
e.g.,
load('/path/to/functionality.js')
and inside /path/to/functionality.js:
var query_string = require("qs") // an npm module
module.exports = function(name){
return qs.stringify({
name:name,
time:new Date()
}
}
That last part, implementing the synchronous require() method, is what enables it to utilize NPM packages built to run on the server.
This module was designed to implement the require functionality as closely as possible in the browser. Disclaimer: I have written this module.
Yes it is very easy to use, but you need to load javascript file in browser by script tag
<script src="module.js"></script>
and then user in js file like
var moduel = require('./module');
I am making a app using electron and it works as expected.
참고URL : https://stackoverflow.com/questions/5168451/javascript-require-on-client-side
'Development Tip' 카테고리의 다른 글
| FTL 파일이란? (0) | 2020.10.05 |
|---|---|
| JMS 대신 Scala의 액터를 선호하는 디자인 결정은 무엇입니까? (0) | 2020.10.05 |
| System.Double을 '0'(숫자, 정수?)과 비교하는 올바른 방법 (0) | 2020.10.04 |
| ng-model 동적 할당 (0) | 2020.10.04 |
| 파이썬에서 문자열을 바이너리로 변환 (0) | 2020.10.04 |