Làm cách nào để quản lý các phụ thuộc JavaScript phía máy khách? [đóng cửa]

Mặc dù có những giải pháp tuyệt vời để quản lý sự phụ thuộc ở phía máy chủ, nhưng tôi không thể tìm thấy giải pháp nào đáp ứng được tất cả nhu cầu của tôi để có một quy trình quản lý sự phụ thuộc JavaScript phía máy khách nhất quán. Tôi muốn đáp ứng 5 yêu cầu sau:

1. Quản lý các phần phụ thuộc phía máy khách của tôi ở định dạng tương tự như package.json của npm hoặc bower 'sbower.json
2. Nó phải linh hoạt để trỏ đến git repo hoặc các tệp js thực tế (trên web hoặc cục bộ) trong dependency.jsontệp của tôi cho các thư viện ít được biết đến hơn (npm cho phép bạn trỏ đến git repos)
3. Nó sẽ thu nhỏ và không gian tên tất cả các thư viện thành một tệp duy nhất như ender - đó là tệp js duy nhất mà tôi cần đặt trong <script>thẻ của mình ở phía máy khách
4. Nó nên có hỗ trợ ngoài hộp cho CoffeeScript như BoxJS 4 (hiện đã chết)

5. Trong trình duyệt, tôi có thể sử dụng một trong hai kiểu yêu cầu :

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

   Hoặc tốt hơn, hãy làm theo kiểu headjs :

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

Nếu không có một công cụ duy nhất nào như vậy tồn tại, thì sự kết hợp tốt nhất của các công cụ tức là một chuỗi công cụ mà tôi có thể kết hợp bằng cách sử dụng thứ gì đó như volo (hoặc grunt )?

Tôi đã nghiên cứu tất cả các công cụ mà tôi đã liên kết ở đây và chúng chỉ đáp ứng tối đa 3 yêu cầu của tôi ở từng cá nhân. Vì vậy, vui lòng không đăng lại về các công cụ này. Tôi chỉ chấp nhận câu trả lời cung cấp một công cụ duy nhất đáp ứng tất cả 5 yêu cầu của tôi hoặc nếu ai đó đăng một quy trình làm việc / tập lệnh / ví dụ làm việc cụ thể về chuỗi công cụ gồm nhiều công cụ như vậy cũng đáp ứng tất cả các yêu cầu của tôi. Cảm ơn bạn.

request.js làm mọi thứ bạn cần.

Câu trả lời của tôi cho câu hỏi này có thể giúp bạn

Thí dụ:

Hệ thống phân cấp dự án ứng dụng khách:

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

main.js là nơi bạn khởi tạo ứng dụng khách của mình và định cấu hình request.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
});

Các phần phụ thuộc sẽ sử dụng plugin cs khi được thêm vào trước bởi "cs!". Plugin cs biên dịch tệp coffeescript.

Khi bạn đi vào sản, bạn có thể trước khi biên dịch toàn bộ dự án của bạn với r.js .

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

Đây là yêu cầu của bạn:

• Quản lý các phần phụ thuộc phía máy khách của tôi ở định dạng tương tự như package.json của npm hoặc component.json của bower. Khác nhau nhưng NHƯ TỐT!

• Tôi sẽ có sự linh hoạt để trỏ đến git repo hoặc các tệp js thực tế (trên web hoặc cục bộ) trong tệp dependency.json của tôi cho các thư viện ít được biết đến hơn (npm hãy để bạn trỏ đến git repos). ĐÚNG

• Nó sẽ thu nhỏ và không gian tên tất cả các thư viện thành một tệp duy nhất như ender - đó là tệp js duy nhất mà tôi cần đặt trong thẻ tập lệnh của mình ở phía máy khách. CÓ với r.js.

• Nó nên có hỗ trợ ngoài hộp cho coffeescript như Box. ĐÚNG

• Trong trình duyệt, tôi có thể sử dụng yêu cầu style hoặc headjs. ĐÚNG

http://requirejs.org/ là trang bạn đang tìm kiếm mà tôi tin rằng

Với tư cách @ Guillaume86, tôi nghĩ hem sẽ giúp bạn đến gần nhất với nơi bạn muốn.

Trong sự phụ thuộc của hem được quản lý bằng cách sử dụng kết hợp npm và hem. Sử dụng npm để cài đặt rõ ràng tất cả các phụ thuộc bên ngoài dự án của bạn. Sử dụng hem để chỉ định những phụ thuộc nào (cả bên ngoài và cục bộ) nên được kết hợp với nhau cho các hoạt động phía máy khách của bạn.

Tôi đã tạo một dự án khung của cái này để bạn có thể thấy cách hoạt động của nó - bạn có thể xem nó tại https://github.com/dsummersl/clientsidehem

Thêm phụ thuộc

Sử dụng npm để tìm kiếm một phụ thuộc cụ thể và sau đó sửa đổi tệp package.json để đảm bảo rằng phụ thuộc được theo dõi trong tương lai. Sau đó, chỉ định sự phụ thuộc cho ứng dụng của bạn trong slug.json.

Ví dụ: giả sử bạn muốn thêm phụ thuộc tập lệnh cà phê. Chỉ cần sử dụng npm để cài đặt phụ thuộc và lưu nó vào tệp package.json của bạn:

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

Giả sử bạn muốn bao gồm mô-đun của riêng mình 'bloomfilters' và nó không có trong sổ đăng ký npm. Bạn có thể thêm nó vào dự án của mình theo cách sau:

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

Mô-đun cục bộ

Nếu bạn muốn bao gồm cà phê hoặc javascript của riêng mình, bạn có thể làm như vậy bằng cách thêm các tệp đó vào ứng dụng / thư mục. Lưu ý rằng để hiển thị tập lệnh của bạn thông qua phương thức 'request', bạn phải đặt nó trở thành mô-đun CommonJS. Nó rất đơn giản - xem các tài liệu hem .

Tập tin có sẵn

Nếu bạn muốn bao gồm mã không phải CommonJS không 'yêu cầu', bạn cũng có thể kết hợp mã đó bằng cách tham chiếu javascript hoặc coffeescript tùy chỉnh của bạn qua danh sách 'libs' trong slug.json.

CSS

Hem cũng sẽ ghép CSS của bạn lại với nhau, nếu bạn muốn. Xem tài liệu viền .

Xây dựng

Khi bạn đã liệt kê các phụ thuộc của mình, bạn có thể sử dụng viền để khâu tất cả chúng lại với nhau.

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

Ghi chú

Hem được dành cho dự án Spinejs - nhưng bạn không cần phải sử dụng nó cho việc đó. Bỏ qua bất kỳ tài liệu nào đề cập đến cột sống như bạn muốn ...

Chà, tôi ngạc nhiên là chưa có ai đề cập đến Browserify .

1. hỗ trợ định dạng package.json
2. sử dụng npm bên dưới có thể sử dụng github (hoặc bất kỳ git nào) làm nguồn gói
3. thu nhỏ và nối tất cả các phần phụ thuộc vào một tệp duy nhất.
4. hỗ trợ coffeescript nếu bạn đưa nó vào phần phụ thuộc của mình
5. yêu cầu phong cách tất cả các cách.
6. hỗ trợ bản đồ nguồn

Tôi khá chắc chắn Hem đáp ứng được yêu cầu của bạn (Tôi sử dụng một cái nĩa cá nhân với các trình biên dịch bổ sung - ngọc bích và bút cảm ứng - rất dễ tùy chỉnh theo nhu cầu của bạn). Nó sử dụng npm để quản lý các kho dự trữ.

Bạn có thể muốn xem Yeoman , sử dụng một số kỹ thuật để giúp bạn thực hiện các yêu cầu của mình.

Quy trình làm việc của chúng tôi bao gồm ba công cụ để cải thiện năng suất và sự hài lòng của bạn khi xây dựng ứng dụng web: yo (công cụ giàn giáo), grunt (công cụ xây dựng) và bower (để quản lý gói).

Hỗ trợ tích hợp cho CoffeeScript, Compass và hơn thế nữa. Hoạt động với r.js ( RequiJS ), unittesting, v.v.

Đối với yêu cầu của bạn:

1. Bower được sử dụng để quản lý sự phụ thuộc
2. Bower có thể hoạt động với các tệp cục bộ, git: //, http: // và hơn thế nữa
3. Hỗ trợ tích hợp để thu nhỏ và nối (ngay cả đối với hình ảnh của bạn)
4. Hỗ trợ tích hợp để tự động biên dịch CoffeeScript & Compass (với LiveReload)
5. Như đã nêu trong quá trình xây dựng: nếu bạn đang sử dụng AMD, tôi sẽ chuyển các mô-đun đó qua r.js để bạn không cần phải làm như vậy.

Tất cả các tính năng:

Dàn dựng nhanh như chớp - Dễ dàng dàn dựng các dự án mới với các mẫu có thể tùy chỉnh (ví dụ HTML5 Boilerplate, Twitter Bootstrap), RequestJS và hơn thế nữa.

Quá trình xây dựng tuyệt vời - Bạn không chỉ nhận được sự thu nhỏ và nối; Tôi cũng tối ưu hóa tất cả các tệp hình ảnh, HTML, biên dịch các tệp CoffeeScript và La bàn của bạn, nếu bạn đang sử dụng AMD, tôi sẽ chuyển các mô-đun đó qua r.js để bạn không phải làm vậy.

Tự động biên dịch CoffeeScript & Compass - Quy trình xem LiveReload của chúng tôi tự động biên dịch các tệp nguồn và làm mới trình duyệt của bạn bất cứ khi nào có thay đổi để bạn không cần phải làm vậy.

Tự động lint các tập lệnh của bạn - Tất cả các tập lệnh của bạn được tự động chạy dựa trên JSHint để đảm bảo chúng tuân theo các phương pháp hay nhất về ngôn ngữ.

Máy chủ xem trước tích hợp sẵn - Không còn phải khởi động Máy chủ HTTP của riêng bạn. Một trong những tích hợp của tôi có thể được kích hoạt chỉ với một lệnh.

Tối ưu hóa hình ảnh tuyệt vời - Tôi tối ưu hóa tất cả hình ảnh của bạn bằng OptiPNG và JPEGTran để người dùng của bạn có thể dành ít thời gian hơn khi tải xuống nội dung và nhiều thời gian hơn khi sử dụng ứng dụng của bạn.

Quản lý gói Killer - Cần phụ thuộc? Nó chỉ là một tổ hợp phím. Tôi cho phép bạn dễ dàng tìm kiếm các gói mới thông qua dòng lệnh (ví dụ: bower search jquery), cài đặt và cập nhật chúng mà không cần mở trình duyệt của bạn.

Kiểm tra đơn vị PhantomJS - Dễ dàng chạy kiểm tra đơn vị của bạn trong WebKit không đầu thông qua PhantomJS. Khi bạn tạo một ứng dụng mới, tôi cũng bao gồm một số giàn giáo thử nghiệm cho ứng dụng của bạn.

Bower có thể phù hợp với nhu cầu của bạn (1) và (2) đối với phần còn lại bạn có yêu cầu. Từ 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.

Để cài đặt một gói:

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

Nhìn vào trình quản lý gói Jam . Sau đây là mô tả từ trang chủ của nó

Đối với các nhà phát triển front-end muốn tài sản có thể bảo trì, Jam là một trình quản lý gói cho JavaScript. Không giống như các kho khác, chúng tôi đặt trình duyệt lên hàng đầu.

Nó có vẻ rất giống với npm về cách nó hoạt động.

Cài đặt gói như bên dưới

jam install backbone

giữ cho các gói được cập nhật bằng cách thực thi

jam upgrade
jam upgrade {package} 

Tối ưu hóa các gói để sản xuất

jam compile compiled.min.js

Các phụ thuộc Jam có thể được thêm vào package.jsontệp.

Để có tài liệu đầy đủ, hãy đọc Tài liệu về Jam

Tôi vừa xem qua tiêm.js

Một số tính năng, từ địa điểm dự án :

Inject (Apache Software License 2.0) là một cách mang tính cách mạng để quản lý các phần phụ thuộc của bạn theo cách Thư viện Bất khả tri. Một số tính năng chính của nó bao gồm:

• Tuân thủ CommonJS trong Trình duyệt (xuất. *)
• Xem toàn bộ Ma trận hỗ trợ CommonJS
• Truy xuất miền chéo của các tệp (qua easyXDM)
• localStorage (tải một mô-đun một lần)

Có một vài sự lựa chon:

• http://browserify.org/ cho phép bạn nhập các mô-đun
• RequestJS giải quyết cùng một vấn đề
• Một trong những dường như đang trong quá trình phát triển tích cực là JoinJS

Thành phần cũng có thể được quan tâm, nó không quản lý các phụ thuộc nhưng cho phép bạn sử dụng các phiên bản được cắt nhỏ của các thư viện lớn khác.

Tôi sử dụng hem với npm và tôi muốn thêm một số lợi ích bổ sung mà tôi nghĩ cho đến nay vẫn chưa được đề cập.

• Hem có một máy chủ web độc lập (tầng) để bạn có thể phát triển mã của mình mà không cần biên dịch lại. Tôi không bao giờ sử dụng hem buildtrừ khi tôi đang xuất bản một ứng dụng.
• Bạn không cần sử dụng Spine.js để sử dụng hem, bạn có thể sử dụng nó để biên dịch các gói coffeescript tùy ý nếu bạn thiết lập slug.json đúng cách. Đây là một trong những gói của tôi được biên dịch tự động với cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Nói về điều trên, hem cho phép bạn liên kết các phần phụ thuộc khác trên hệ thống cục bộ của bạn với liên kết npm và kết hợp chúng một cách liền mạch ngay cả khi bạn đang sử dụng máy chủ phân tầng. Trên thực tế, bạn thậm chí không cần sử dụng cakephương pháp trên, bạn chỉ có thể liên kết trực tiếp đến coffeescript từ các dự án phụ thuộc.
• Hem hỗ trợ eco(nhúng Coffeescript) cho các khung nhìn và Stylus cho CSS, đồng thời biên dịch tất cả những thứ đó, cùng với Coffeescript của bạn, thành một tệp JS và một tệp CSS.

Đây là danh sách cơ bản để thiết lập ứng dụng Spine, hem, coffeescript. Hãy bỏ qua các phần Cột sống. Trên thực tế, đôi khi tôi sử dụng spine appđể thiết lập cấu trúc thư mục cho một ứng dụng không phải Spine, sau đó chỉnh sửa slug.jsonđể thay đổi thành cấu trúc biên dịch khác.

1. Cài đặt NPM: curl http://npmjs.org/install.sh | shtrên hệ thống * nix. Tôi sẽ cho rằng nó có sẵn từ dòng lệnh.
2. Cài đặt hem trên toàn cầu ( npm install -g hem). Quá trình phát triển đã phân nhánh vào cuối năm nay, vì vậy bạn có thể muốn lấy nó ra khỏi github ( https://github.com/spine/hem ), kiểm tra một nhánh và npm install -g .trong thư mục đó.
3. npm install -g spine.app sẽ cung cấp cột sống dưới dạng lệnh toàn cục
4. spine app foldersẽ thực hiện một dự án Spine được gọi appvào folder, tạo cấu trúc thư mục phù hợp và một loạt các tệp khung để bắt đầu.
5. cdvào thư mục và chỉnh sửa dependencies.jsoncho các thư viện bạn cần. Thêm chúng vào slug.jsonđể hem biết tìm chúng ở đâu.
6. Tùy chọn: npm linkbất kỳ gói cục bộ nào của bạn đang được phát triển node_modulesvà bạn có thể thêm chúng vào slug.jsoncho hem (một index.jsđể bao gồm trực tiếp hoặc một index.coffeenếu bạn muốn hem biên dịch nó.)
7. npm install . để tải xuống tất cả các phụ thuộc bạn vừa nhập vào.

8. Nếu bạn nhìn vào cấu hình cột sống mặc định, có một app/lib/setup.coffeenơi chứa requiretất cả các thư viện bạn cần từ các tệp phụ thuộc của mình. Ví dụ:

   # 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. Trong đó index.coffee, bạn chỉ cần require lib/setuptải bộ điều khiển chính cho ứng dụng của mình. Ngoài ra, bạn cần requirebất kỳ lớp nào khác trong các bộ điều khiển khác. Bạn có thể sử dụng spine controller somethinghoặc spine model somethingtạo mẫu cho bộ điều khiển và mô hình. Bộ điều khiển Spine điển hình trông giống như sau, sử dụng nút 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. Mặc định được tạo index.htmlthường sẽ ổn khi tải ứng dụng của bạn, nhưng hãy sửa đổi nếu cần. Theo yêu cầu của bạn, nó chỉ lấy một jsvà một csstệp mà bạn không bao giờ cần phải sửa đổi.

11. Chỉnh sửa các tệp bút cảm ứng của bạn nếu cần trong cssthư mục. Nó linh hoạt hơn rất nhiều so với CSS :)
12. Từ folder, chạy hem serverđến khởi động máy chủ hem và điều hướng đến localhost:9294để xem ứng dụng của bạn. (Nếu bạn đã cài đặt hem trên toàn cầu.) Nó có một số đối số ẩn, ví dụ: --host 0.0.0.0lắng nghe trên tất cả các cổng.
13. Xây dựng phần còn lại của ứng dụng của bạn bằng các kỹ thuật MVC thích hợp và sử dụng bút cảm ứng cho CSS và sinh thái cho các lượt xem. Hoặc hoàn toàn không sử dụng Spine, và hem sẽ vẫn hoạt động tốt với Coffeescript và npm. Có rất nhiều ví dụ về các dự án sử dụng cả hai mô hình.

Một điều nữa: thông thường, hem serversẽ tự động cập nhật khi bạn cập nhật mã của mình và lưu tệp, điều này làm cho việc gỡ lỗi trở nên dễ dàng. Chạy hem buildsẽ biên dịch ứng dụng của bạn thành hai tệp, tệp application.jsnày được thu nhỏ và application.css. Nếu bạn chạy hem serversau đó, nó sẽ sử dụng các tệp đó và không còn tự động cập nhật nữa. Vì vậy, đừng hem buildcho đến khi bạn thực sự cần một phiên bản rút gọn của ứng dụng để triển khai.

Tham khảo thêm: Spine.js & hem bắt đầu

Đây là một giải pháp có cách tiếp cận rất khác: gói tất cả các mô-đun thành một đối tượng JSON và yêu cầu các mô-đun bằng cách đọc và thực thi nội dung tệp mà không có yêu cầu bổ sung.

Triển khai demo trên clientide thuần túy: http://strd6.github.io/editor/

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

STRd6 / request phụ thuộc vào việc có sẵn một gói JSON trong thời gian chạy. Các requirechức năng được tạo ra cho gói đó. Gói chứa tất cả các tệp mà ứng dụng của bạn có thể yêu cầu. Không có yêu cầu http nào khác được thực hiện vì gói này bao gồm tất cả các phần phụ thuộc. Điều này gần như người ta có thể nhận được yêu cầu kiểu Node.js trên máy khách.

Cấu trúc của gói như sau:

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

Không giống như Node, một gói không biết đó là tên bên ngoài. Nó phụ thuộc vào nhịp độ bao gồm cả sự phụ thuộc để đặt tên cho nó. Điều này cung cấp tính đóng gói hoàn chỉnh.

Với tất cả những gì thiết lập, đây là một chức năng tải một tệp từ bên trong một gói:

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

Bối cảnh bên ngoài này cung cấp một số biến mà các mô-đun có quyền truy cập.

Một requirechức năng được tiếp xúc với các mô-đun nên chúng có thể yêu cầu các mô-đun khác.

Các thuộc tính bổ sung như tham chiếu đến đối tượng toàn cục và một số siêu dữ liệu cũng được hiển thị.

Cuối cùng, chúng tôi thực thi chương trình trong mô-đun và ngữ cảnh nhất định.

Câu trả lời này sẽ hữu ích nhất cho những người muốn có một câu lệnh yêu cầu kiểu node.js đồng bộ trong trình duyệt và không quan tâm đến các giải pháp tải tập lệnh từ xa.

Kiểm tra cartero nếu bạn sử dụng node / express trên chương trình phụ trợ.

Tôi khuyên bạn nên xem bộ công cụ dojo có vẻ đáp ứng hầu hết các yêu cầu của bạn. Cái mà tôi không chắc là CoffeeScript.

dojo hoạt động với các mô-đun được viết ở định dạng Định nghĩa mô-đun không đồng bộ (AMD). Nó có một hệ thống xây dựng với các gói và bạn có thể tổng hợp chúng trong một hoặc một số tệp (được gọi là các lớp). Rõ ràng nó chấp nhận các kho lưu trữ loại git, thêm chi tiết về hệ thống xây dựng tại đây:

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

Đối với hồ sơ, phiên bản beta v1.9 dự kiến ​​vào tháng tới.

Một khung công tác khác đáp ứng tất cả các tiêu chí của tôi được phát hành gần đây: http://duojs.org/ (và cũng hỗ trợ coi các tài nguyên khác như CSS là phụ thuộc).

quá trình tiêm phụ thuộc với tải không đồng bộ + Browserify sẽ là một lựa chọn tốt khác, so với Requestjs

asynchronous-frontend-dependency-management-without-AMD