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
일반적으로 컴파일 타임에 스크립트를 전처리하고 컴파일 타임 require에도 "경량 심"으로 다시 작성되는 하나의 (또는 매우 적은) 패키지로 묶는 것이 좋습니다 .
나는 그것을 할 수 있어야하는 "새로운"도구를 따라 구글 검색했습니다
그리고 이미 언급 한 것 browserify역시 아주 잘 맞아야합니다. //esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/
이전 스택 오버플로 설명 -CommonJS, AMD 및 RequireJS 간의 관계?
(가) 상세 다양한 모듈 프레임 워크의 논의와 require()그들이 필요에 쓰기 모듈 형 자바 스크립트와 AMD, CommonJS & ES 하모니 - 애디 오스 마니
Browserify를 사용하기 만하면 파일이 프로덕션에 들어가기 전에 파일을 처리하고 파일을 번들로 압축하는 컴파일러와 같은 것입니다.
프로젝트의 파일이 필요한 main.js 파일이 있다고 생각하면 browserify를 실행할 때 모든 파일을 처리하고 모든 파일과 함께 번들을 생성하여 require HTTP 요청없이 브라우저에서 동기식으로 호출을 예를 들어 성능 및 번들 크기에 대한 오버 헤드가 거의 없습니다.
자세한 정보는 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가 다른 모듈을 필요로 할 수 있도록 기능을 모듈에 노출되어있다.
전역 개체 및 일부 메타 데이터에 대한 참조와 같은 추가 속성도 노출됩니다.
마지막으로 모듈과 주어진 컨텍스트 내에서 프로그램을 실행합니다.
이 답변은 브라우저에서 동기식 node.js 스타일 require 문을 원하고 원격 스크립트 로딩 솔루션에 관심이없는 사람들에게 가장 유용합니다.
다른 솔루션 (require.js 포함)보다 훨씬 간소화 된 워크 플로를 제공하는 구성 요소 프로젝트를 찾았으므로 https://github.com/component/component를 확인하는 것이 좋습니다. 나는 이것이 약간 늦은 대답이라는 것을 알고 있지만 누군가에게 유용 할 수 있습니다.
다음은 웹 클라이언트에서 require 및 export를 사용하는 간단한 방법입니다. "네임 스페이스"전역 변수를 생성하는 간단한 래퍼이며 CommonJS 호환 코드를 다음과 같이 "define"함수로 래핑합니다.
namespace.lookup('org.mydomain.mymodule').define(function (exports, require) {
var extern = require('org.other.module');
exports.foo = function foo() { ... };
});
여기에 더 많은 문서 :
클라이언트 측-필요한 라이브러리 비동기 제공 load()임의 JS 파일 또는 NPM 모듈 (용도에로드하는 데 사용될 수 함수 module.exports), 모든 .css파일 어느 .json어느.html 텍스트와 같은 임의의 다른 파일.
예 :
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>
이 프로젝트의 정말 멋진 부분은 모든 ed 스크립트 내 에서 node.js에서 기대하는 것과 같은 방식으로 load()동기 require()함수를 사용할 수 있다는 것입니다!
예 :
load('/path/to/functionality.js')
그리고 내부 /path/to/functionality.js:
var query_string = require("qs") // an npm module
module.exports = function(name){
return qs.stringify({
name:name,
time:new Date()
}
}
마지막 부분 인 동기식 require()방법을 구현 하면 서버에서 실행되도록 빌드 된 NPM 패키지를 활용할 수 있습니다.
이 모듈은 require브라우저에서 가능한 한 가깝게 기능 을 구현하도록 설계되었습니다 . 면책 조항 :이 모듈을 작성했습니다.