클라이언트 측 JavaScript 종속성을 관리하는 방법은 무엇입니까?

클라이언트 측 JavaScript 종속성을 관리하는 방법은 무엇입니까? [닫은]

---

서버 측에서 종속성을 관리하는 훌륭한 솔루션이 있지만 일관된 클라이언트 측 JavaScript 종속성 관리 워크 플로를 갖는 데 필요한 모든 요구 사항을 충족하는 솔루션을 찾을 수 없었습니다. 다음 5 가지 요구 사항을 충족하고 싶습니다.

1. NPM의 유사한 형식으로 내 클라이언트 측 종속성을 관리 package.json 또는 이물 의bower.json
2. dependency.json덜 알려진 라이브러리의 경우 내 파일 에서 git repo 또는 실제 js 파일 (웹 또는 로컬)을 가리키는 유연성이 있어야합니다 (npm을 사용하면 git repos를 가리킬 수 있음).
3. 그것은 작게를과 같은 하나의 파일에 모든 라이브러리를 네임 스페이스해야 청산 - 내에 넣어 필요가있는 유일한 JS 파일의 <script>클라이언트 측에서 태그
4. 그것은 BoxJS 같은 커피 스크립트에 대한 특별한 지원이 있어야 사 (현재 사망)

5. 브라우저에서 require 스타일 을 사용할 수 있어야 합니다.

   var $ = require('jquery');
   var _ = require('underscore');
   

   또는 더 좋은 방법은 headjs 스타일입니다.

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });
   

그러한 단일 도구가 하나도 없다면 volo (또는 grunt ) 와 같은 것을 사용하여 결합 할 수있는 도구 체인과 같은 최상의 도구 조합은 무엇 입니까?

여기에서 연결 한 모든 도구를 이미 조사했으며 개별적으로 기껏해야 내 요구 사항 중 최대 3 개만 충족합니다. 따라서 이러한 도구에 대해 다시 게시하지 마십시오. 내 요구 사항 5 개를 모두 충족하는 단일 도구를 제공하는 답변 만 받거나 누군가 내 모든 요구 사항을 충족하는 여러 도구의 도구 체인에 대한 구체적인 워크 플로 / 스크립트 / 작업 예제를 게시하는 경우에만 수락합니다. 감사합니다.

---

require.js 는 필요한 모든 것을 수행합니다.

이 질문에 대한 내 대답 이 도움 이 될 수 있습니다.

예:

클라이언트 앱 프로젝트 계층 :

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.js 는 클라이언트 애플리케이션을 초기화하고 require.js를 구성하는 곳입니다.

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

종속성은 "cs!"가 앞에 붙을 때 cs 플러그인 을 사용합니다 . cs 플러그인은 coffeescript 파일을 컴파일합니다.

prod에 들어가면 r.js로 전체 프로젝트를 미리 컴파일 할 수 있습니다 .

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

요구 사항은 다음과 같습니다.

• npm의 package.json 또는 bower의 component.json과 유사한 형식으로 클라이언트 측 종속성을 관리합니다. 다르지만 훌륭합니다!

• 덜 알려진 라이브러리에 대한 dependency.json 파일에서 git repo 또는 실제 js 파일 (웹 또는 로컬)을 유연하게 가리켜 야합니다 (npm에서 git repos를 가리 킵니다). 예

• 모든 라이브러리를 축소하고 ender와 같은 단일 파일로 네임 스페이스를 지정해야합니다. 클라이언트 측에서 스크립트 태그에 넣어야하는 유일한 js 파일입니다. r.js로 예.

• Box와 같은 coffeescript에 대한 out of box 지원이 있어야합니다. 예

• 브라우저에서 require style 또는 headjs를 사용할 수 있습니다. 예

---

http://requirejs.org/ 는 당신이 찾고있는 것입니다.

---

@ Guillaume86로서 나는 밑단이 당신이 원하는 곳에 가장 가깝게 줄 것이라고 생각합니다.

헴 종속성은 npm과 헴의 조합을 사용하여 관리됩니다. npm을 사용하여 모든 프로젝트 외부 종속성을 명시 적으로 설치합니다. hem을 사용하여 클라이언트 측 작업을 위해 함께 연결되어야하는 종속성 (외부 및 로컬 모두)을 지정합니다.

나는 이것이 어떻게 작동하는지 볼 수 있도록 이것의 스켈레톤 프로젝트를 만들었습니다. https://github.com/dsummersl/clientsidehem 에서 볼 수 있습니다.

종속성 추가

npm을 사용하여 특정 종속성을 검색 한 다음 package.json 파일을 수정하여 향후 종속성이 추적되도록합니다. 그런 다음 slug.json에서 애플리케이션에 대한 종속성을 지정하십시오.

예를 들어 커피 스크립트 종속성을 추가한다고 가정합니다. npm을 사용하여 종속성을 설치하고 package.json 파일에 저장하십시오.

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

자체 모듈 'bloomfilters'를 포함하려고하는데 npm 레지스트리에 없다고 가정합니다. 다음과 같은 방법으로 프로젝트에 추가 할 수 있습니다.

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

로컬 모듈

자신의 커피 또는 자바 스크립트를 포함하려면 해당 파일을 app / 폴더에 추가하면됩니다. 'require'메소드를 통해 스크립트를 노출하려면 CommonJS 모듈로 만들어야합니다. 매우 간단 합니다. 밑단 문서를 참조하십시오 .

로컬 파일

비 CommonJS 비 '필수'코드를 포함하려면 slug.json의 'libs'목록을 통해 사용자 정의 자바 스크립트 또는 커피 스크립트를 참조하여 연결할 수도 있습니다.

CSS

Hem은 원하는 경우 CSS도 함께 연결합니다. 밑단 문서를 참조하십시오 .

건물

종속성이 나열되면 밑단을 사용하여 모두 함께 꿰맬 수 있습니다.

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

노트

Hem은 spinejs 프로젝트를 위한 것이지만이를 위해 사용할 필요는 없습니다. 원하는대로 척추를 언급하는 문서는 무시하십시오.

---

글쎄, 아무도 아직 Browserify를 언급 하지 않았다는 사실에 놀랐습니다 .

1. package.json 형식 지원
2. github (또는 모든 git) 저장소를 패키지 소스로 사용할 수있는 npm을 사용합니다.
3. 모든 종속성을 축소하고 단일 파일로 연결합니다.
4. 종속성에 포함하면 coffeescript를 지원합니다.
5. 스타일이 필요합니다.
6. 소스 맵 지원

---

Hem 이 귀하의 요구 사항을 충족한다고 확신 합니다 (필자는 추가 컴파일러 (jade 및 stylus)와 함께 개인용 포크를 사용합니다. 귀하의 필요에 맞게 쉽게 사용자 지정할 수 있습니다). npm을 사용하여 종속성을 관리합니다.

---

요구 사항을 지원하기 위해 여러 기술을 사용하는 Yeoman을 살펴볼 수 있습니다 .

우리의 워크 플로는 웹 앱을 빌드 할 때 생산성과 만족도를 높이기위한 세 가지 도구로 구성됩니다 : yo (스캐 폴딩 도구), grunt (빌드 도구) 및 bower (패키지 관리 용).

CoffeeScript, Compass 등을 지원합니다. r.js ( RequireJS ), 단위 테스트 등과 함께 작동합니다 .

귀하의 요구 사항 :

1. Bower는 종속성 관리에 사용됩니다.
2. Bower는 로컬 파일, git : //, http : // 등으로 작업 할 수 있습니다.
3. 축소 및 연결에 대한 기본 지원 (이미지 포함)
4. CoffeeScript 및 Compass (LiveReload 포함)를 자동으로 컴파일하는 내장 지원
5. 빌드 프로세스에서 언급했듯이 : AMD를 사용하는 경우 해당 모듈을 r.js를 통해 전달하므로 필요하지 않습니다.

모든 기능 :

번개처럼 빠른 스캐 폴딩 — 사용자 정의 가능한 템플릿 (예 : HTML5 Boilerplate, Twitter Bootstrap), RequireJS 등을 사용하여 새 프로젝트를 쉽게 스캐 폴딩합니다.

훌륭한 빌드 프로세스 — 축소 및 연결뿐만 아니라 또한 모든 이미지 파일, HTML을 최적화하고 CoffeeScript 및 Compass 파일을 컴파일합니다. AMD를 사용하는 경우 해당 모듈을 r.js를 통해 전달하므로 그럴 필요가 없습니다.

CoffeeScript 및 Compass 자동 컴파일 — LiveReload 감시 프로세스는 소스 파일을 자동으로 컴파일하고 변경할 때마다 브라우저를 새로 고치므로 필요하지 않습니다.

자동으로 스크립트 린트 — 모든 스크립트가 JSHint에 대해 자동으로 실행되어 언어 모범 사례를 따르고 있는지 확인합니다.

내장 미리보기 서버 — 더 이상 자체 HTTP 서버를 실행할 필요가 없습니다. 내 내장 된 것은 단 하나의 명령으로 해고 될 수 있습니다.

멋진 이미지 최적화 — OptiPNG 및 JPEGTran을 사용하여 모든 이미지를 최적화 하므로 사용자가 자산 다운로드 시간을 줄이고 앱 사용 시간을 늘릴 수 있습니다.

킬러 패키지 관리 — 의존성이 필요하십니까? 키 입력 만하면됩니다. 명령 줄 (예 :`bower search jquery)을 통해 새 패키지를 쉽게 검색하고 설치하고 브라우저를 열지 않고도 업데이트 된 상태로 유지할 수 있습니다.

PhantomJS 단위 테스트 — PhantomJS를 통해 헤드리스 WebKit에서 단위 테스트를 쉽게 실행할 수 있습니다. 새 애플리케이션을 만들 때 앱에 대한 몇 가지 테스트 스캐 폴딩도 포함합니다.

---

Bower 는 귀하의 요구 사항 (1) 및 (2) 나머지 요구 사항에 적합합니다. Readme에서 :

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

패키지를 설치하려면 :

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

---

Look at Jam package manager. Following is the description from its homepage

For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.

It seems a lot similar to npm in how it works.

Install package like below

jam install backbone

keeping packages up to date by executing

jam upgrade
jam upgrade {package} 

Optimize packages for production

jam compile compiled.min.js

Jam dependencies can be added in package.json file.

For complete documentation read Jam Documentation

---

I just came across inject.js

Some of the features, from the project site:

Inject (Apache Software License 2.0) is a revolutionary way to manage your dependencies in a Library Agnostic way. Some of its major features include:

• CommonJS Compliance in the Browser (exports.*)
• View the full CommonJS Support Matrix
• Cross domain retrieval of files (via easyXDM)
• localStorage (load a module once)

---

There are a couple of options:

• http://browserify.org/ which allows you to import modules
• RequireJS addresses the same problem
• One that seems to be in active development is JoinJS

Component might also be of interest, it does not manage dependencies per se but allows you to use chopped up versions of otherwise large libraries.

---

I use hem with npm, and I wanted to add some additional benefits that I think weren't covered so far.

• Hem has a self-contained web server (strata) so you can develop your code without even needing to recompile. I never use hem build unless I am publishing an app.
• You don't need to use Spine.js to use hem, you can use it to compile arbitrary coffeescript packages if you set up slug.json correctly. Here's one of my packages that is auto-compiled with cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Speaking of the above, hem allows you to link other dependencies on your local system in with npm link and combines them seamlessly even when you are using the strata server. In fact, you needn't even use the cake method above, you can just link directly to coffeescript from dependent projects.
• Hem supports eco (embedded Coffeescript) for views and Stylus for CSS, and compiles all that, along with your Coffeescript, into one JS and one CSS file.

Here's a basic list for getting set up with a Spine, hem, coffeescript app. Feel free to ignore the Spine parts. In fact, sometimes I use spine app to set up a directory structure for a non-Spine app, then edit slug.json to change to a different compilation structure.

1. Install NPM: curl http://npmjs.org/install.sh | sh on a *nix system. I'll assume it's available from the command line.
2. Install hem globally (npm install -g hem). Development has branched as of late so you might want to get it straight out of github (https://github.com/spine/hem), checkout a branch, and npm install -g . in that folder.
3. npm install -g spine.app will make spine available as a global command
4. spine app folder will make a Spine project called app in folder, generating the right directory structure and a bunch of skeleton files to get started.
5. cd to folder and edit dependencies.json for the libraries you need. Add them to slug.json so that hem knows where to find them as well.
6. Optional: npm link any of your local packages in development to node_modules, and you can add them to slug.json for hem (either an index.js to include directly or an index.coffee if you want hem to compile it.)
7. npm install . to download all the dependencies you just entered in.

8. If you take a look at the default spine config, there is a app/lib/setup.coffee where you require all the libraries you need from your dependencies. Examples:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'
   

9. In index.coffee, you just require lib/setup and load the main controller for your app. In addition, you need to require any other classes in those other controllers. You can use spine controller something or spine model something to generate templates for controllers and models. Typical Spine controller looks like the following, using node's require:

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header
   

10. The default generated index.html will usually be fine for loading your app, but modify as necessary. Per your requirements, it only pulls in one js and one css file, which you never need to modify.

11. Edit your stylus files as necessary in the css folder. It's a lot more flexible than CSS :)
12. From folder, run hem server to start a hem server, and navigate to localhost:9294 to see your app. (If you installed hem globally.) It has some hidden arguments, for example --host 0.0.0.0 listens on all ports.
13. Build the rest of your app using proper MVC techniques, and use stylus for CSS and eco for views. Or don't use Spine at all, and hem will still work great with Coffeescript and npm. There are many examples of projects using both models.

One more thing: normally, hem server will update automatically as you update your code and save files, which makes it a cinch to debug. Running hem build will compile your app into two files, application.js, which is minified and application.css. If you run hem server after this, it will use those files and no longer update automatically. So don't hem build until you actually need a minified version of your app for deployment.

Additional references: Spine.js & hem getting started

---

Here's a solution that takes a very different approach: package up all the modules into a JSON object and require modules by reading and executing the file content without additional requests.

Pure clientside demo implementation: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6/require depends on having a JSON package available at runtime. The require function is generated for that package. The package contains all the files your app could require. No further http requests are made because the package bundles all dependencies. This is as close as one can get to the Node.js style require on the client.

The structure of the package is as follows:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

Unlike Node a package doesn't know it's external name. It is up to the pacakge including the dependency to name it. This provides complete encapsulation.

Given all that setup here's a function that loads a file from within a package:

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

This external context provides some variable that modules have access to.

A require function is exposed to modules so they may require other modules.

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.

---

Check out cartero if you using node/express on the backend.

---

I'd suggest to check out the dojo toolkit which seems to meet most of your requirements. The one I'm not sure about is CoffeeScript.

dojo works with modules written in the Asynchronous Module Definition (AMD) format. It has a build system with packages and you can aggregate them in one or several files (called layers). Apparently it accepts git type repositories, more details on the build system here:

http://dojotoolkit.org/documentation/tutorials/1.8/build/

For the record, v1.9 beta is expected next month.

---

Another framework that satisfies all my criterion released recently: http://duojs.org/ (and also supports treating other resources like CSS as dependencies).

---

dependency injection with asynchronous loading + browserify will be another good choice, compares to requirejs

asynchronous-frontend-dependency-management-without-AMD

참고URL : https://stackoverflow.com/questions/12893046/how-to-manage-client-side-javascript-dependencies