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

Question 1

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

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

브라우저에서 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 개를 모두 충족하는 단일 도구를 제공하는 답변 만 받거나, 누군가 내 모든 요구 사항을 충족하는 여러 도구의 도구 체인에 대한 구체적인 워크 플로 / 스크립트 / 작업 예를 게시하는 경우에만 수락합니다. 감사합니다.

Question 2

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를 사용할 수 있습니다. 예

Question 3

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

Question 4

@ 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 프로젝트를 위한 것이지만이를 위해 사용할 필요는 없습니다. 원하는대로 척추를 언급하는 문서는 무시하십시오.

Question 5

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

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

Question 6

나는 Hem 이 당신의 요구 사항을 충족시킬 것이라고 확신 합니다. npm을 사용하여 종속성을 관리합니다.

Question 7

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

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

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

귀하의 요구 사항 :

Bower는 종속성 관리에 사용됩니다.
Bower는 로컬 파일, git : //, http : // 등으로 작업 할 수 있습니다.
축소 및 연결 지원 (이미지 포함)
CoffeeScript 및 Compass (LiveReload 포함)를 자동으로 컴파일하는 내장 지원
빌드 프로세스에서 언급했듯이 : 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에서 단위 테스트를 쉽게 실행할 수 있습니다. 새 애플리케이션을 만들 때 앱에 대한 몇 가지 테스트 스캐 폴딩도 포함합니다.

Question 8

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

Question 9

Jam 패키지 관리자를 살펴보세요 . 다음은 홈페이지의 설명입니다.

유지 관리 가능한 자산을 갈망하는 프런트 엔드 개발자에게 Jam은 JavaScript 용 패키지 관리자입니다. 다른 리포지토리와 달리 브라우저를 먼저 배치합니다.

작동 방식이 npm과 비슷해 보입니다.

아래와 같이 패키지 설치

jam install backbone

실행하여 패키지를 최신 상태로 유지

jam upgrade
jam upgrade {package}

생산을위한 패키지 최적화

jam compile compiled.min.js

Jam 종속성을 package.json파일에 추가 할 수 있습니다 .

전체 문서를 보려면 Jam 문서를 읽어보십시오.

Question 10

방금 inject.js 를 발견했습니다.

프로젝트 사이트의 일부 기능 :

Inject (Apache Software License 2.0)는 라이브러리에 구애받지 않는 방식으로 종속성을 관리하는 혁신적인 방법입니다. 주요 기능 중 일부는 다음과 같습니다.

브라우저의 CommonJS 준수 (exports. *)

전체 CommonJS 지원 매트릭스보기

파일의 도메인 간 검색 (easyXDM을 통해)

localStorage (모듈 한 번로드)

Question 11

몇 가지 옵션이 있습니다.

모듈을 가져올 수있는 http://browserify.org/
RequireJS 는 동일한 문제를 해결합니다.
활발하게 개발중인 것으로 보이는 것은 JoinJS입니다.

구성 요소 도 관심을 가질 수 있습니다. 종속성 자체를 관리하지는 않지만 큰 라이브러리의 잘게 잘린 버전을 사용할 수 있습니다.

Question 12

npm과 함께 헴을 사용하고 있으며 지금까지 다루지 않았던 몇 가지 추가 혜택을 추가하고 싶었습니다.

Hem에는 자체 포함 된 웹 서버 (strata)가 있으므로 재 컴파일 할 필요없이 코드를 개발할 수 있습니다. hem build앱을 게시하지 않는 한 절대 사용 하지 않습니다 .
hem을 사용하기 위해 Spine.js를 사용할 필요가 없습니다. slug.json을 올바르게 설정했다면이를 사용하여 임의의 coffeescript 패키지를 컴파일 할 수 있습니다. 다음은 cakefile로 자동 컴파일되는 내 패키지 중 하나입니다. https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
위에서 말하면 hem을 사용하면 로컬 시스템의 다른 종속성을 npm 링크로 연결할 수 있으며 strata 서버를 사용할 때도 원활하게 결합 할 수 있습니다. 실제로 cake위 의 방법을 사용할 필요도 없으며 종속 프로젝트에서 coffeescript에 직접 연결할 수 있습니다.
Hem은 eco뷰를위한 (내장 된 Coffeescript)와 CSS를위한 Stylus를 지원하며 Coffeescript와 함께 모든 것을 하나의 JS와 하나의 CSS 파일로 컴파일합니다.

다음은 Spine, 헴, coffeescript 앱을 설정하기위한 기본 목록입니다. 척추 부분은 무시해도됩니다. 사실, 때때로 저는 spine app비 스파인 앱에 대한 디렉토리 구조를 설정 한 다음 편집 slug.json하여 다른 컴파일 구조로 변경합니다.

curl http://npmjs.org/install.sh | sh* nix 시스템에 NPM을 설치 합니다. 명령 줄에서 사용할 수 있다고 가정하겠습니다.
밑단을 전체적으로 설치합니다 ( npm install -g hem). 개발이 늦게 분기되었으므로 github ( https://github.com/spine/hem )에서 바로 가져 오고 분기를 체크 아웃 한 다음 npm install -g .해당 폴더에서 가져 오는 것이 좋습니다.
npm install -g spine.app 척추를 전역 명령으로 사용할 수 있도록합니다.
spine app folderapp에서 호출 된 Spine 프로젝트를 만들어 folder올바른 디렉토리 구조와 시작하기위한 스켈레톤 파일을 생성합니다.
cddependencies.json필요한 라이브러리 를 폴더 및 편집 합니다. slug.json밑단이 어디에서 찾을 수 있는지 알 수 있도록 추가합니다 .
선택 사항 : npm link개발중인 로컬 패키지 node_modules를 slug.json에 헴에 추가 할 수 있습니다 ( index.js직접 포함하거나 index.coffee헴이 컴파일하도록하려는 경우).
npm install . 방금 입력 한 모든 종속성을 다운로드합니다.

기본 척추 설정을 살펴 경우를가 app/lib/setup.coffee어디 require당신이 당신의 의존성에서 필요한 모든 라이브러리. 예 :

# 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'

에서는 앱의 메인 컨트롤러를로드하기 index.coffee만하면 require lib/setup됩니다. 또한 require다른 컨트롤러의 다른 클래스 가 필요합니다 . spine controller something또는 spine model something을 사용 하여 컨트롤러 및 모델에 대한 템플릿을 생성 할 수 있습니다 . 일반적인 Spine 컨트롤러는 노드를 사용하여 다음과 같습니다 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

생성 된 기본값 index.html은 일반적으로 앱을로드하는 데 적합하지만 필요에 따라 수정합니다. 요구 사항에 따라 하나 js및 하나의 css파일 만 가져 오므 로 수정할 필요가 없습니다.
css폴더 에서 필요에 따라 스타일러스 파일을 편집 합니다. CSS보다 훨씬 유연합니다. :)
에서 folder실행 hem server하여 헴 서버를 시작하고로 이동 localhost:9294하여 앱을 확인합니다. (전역 적으로 hem을 설치 한 경우) 일부 숨겨진 인수가 --host 0.0.0.0있습니다. 예를 들어 모든 포트에서 수신 대기합니다.
적절한 MVC 기술을 사용하여 나머지 앱을 빌드하고 CSS에는 스타일러스를, 뷰에는 eco를 사용합니다. 또는 Spine을 전혀 사용하지 않아도 헴은 Coffeescript 및 npm에서 여전히 잘 작동합니다. 두 모델을 모두 사용하는 프로젝트의 예가 많이 있습니다.

한 가지 더 : 일반적으로 hem server코드를 업데이트하고 파일을 저장할 때 자동으로 업데이트되므로 디버깅이 간편해집니다. 실행 hem build하면 앱 application.js이 축소 된 파일 과 application.css. hem server이 후에 실행 하면 해당 파일을 사용하고 더 이상 자동으로 업데이트되지 않습니다. 따라서 hem build배포를 위해 실제로 앱의 축소 된 버전이 필요할 때까지 하지 마십시오 .

추가 참조 : Spine.js 및 hem 시작하기

Question 13

다음은 매우 다른 접근 방식을 취하는 솔루션입니다. 모든 모듈을 JSON 개체로 패키징하고 추가 요청없이 파일 콘텐츠를 읽고 실행하여 모듈을 요구합니다.

순수한 클라이언트 측 데모 구현 : http://strd6.github.io/editor/

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 문을 원하고 원격 스크립트 로딩 솔루션에 관심이없는 사람들에게 가장 유용합니다.

Question 14

백엔드에서 node / express를 사용하는 경우 cartero를 확인하십시오 .

Question 15

대부분의 요구 사항을 충족하는 것으로 보이는 dojo 툴킷 을 확인하는 것이 좋습니다 . 내가 확실하지 않은 것은 CoffeeScript입니다.

dojo는 AMD (Asynchronous Module Definition) 형식으로 작성된 모듈과 함께 작동합니다. 패키지가있는 빌드 시스템이 있으며이를 하나 또는 여러 파일 (레이어라고 함)에 집계 할 수 있습니다. 분명히 git 유형 리포지토리를 허용하며 여기에서 빌드 시스템에 대한 자세한 내용을 볼 수 있습니다.

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

기록을 위해 v1.9 베타는 다음 달에 출시 될 예정입니다.

Question 16

최근 공개 된 모든 기준을 충족하는 또 다른 프레임 워크 : http://duojs.org/ (또한 CSS와 같은 다른 리소스를 종속성으로 처리하는 것을 지원함).

Question 17

비동기 로딩 + browserify를 사용한 종속성 주입은 requirejs와 비교하여 또 다른 좋은 선택이 될 것입니다.

AMD를 사용하지 않는 비동기 프런트 엔드 종속성 관리