Câu hỏi NPM so với Bower so với Browserify so với Gulp so với Grunt so với Webpack


Tôi đang cố gắng tóm tắt kiến ​​thức của mình về các trình quản lý gói, gói và trình chạy tác vụ phổ biến nhất của JavaScript. Nêu tôi sai vui long chân chỉnh tôi:

  • npm & bower là người quản lý gói. Họ chỉ tải xuống các phụ thuộc và không biết cách tự xây dựng các dự án. Những gì họ biết là gọi webpack/gulp/grunt sau khi tìm nạp tất cả các phụ thuộc.
  • bower giống như npm, nhưng xây dựng các cây phụ thuộc phẳng (không giống như npm làm theo cách đệ quy). Ý nghĩa npm tìm nạp các phụ thuộc cho mỗi phụ thuộc (có thể lấy cùng một vài lần), trong khi bower hy vọng bạn sẽ bao gồm các phụ thuộc phụ theo cách thủ công. Đôi khi bower và npm được sử dụng cùng nhau cho front-end và back-end tương ứng (vì mỗi megabyte có thể quan trọng trên front-end).
  • grunt và gulp là người chạy nhiệm vụ để tự động hóa mọi thứ có thể được tự động hóa (tức là biên dịch CSS / Sass, tối ưu hóa hình ảnh, tạo một bó và rút gọn / transpile nó).
  • grunt so với gulp (giống như maven so với gradle hoặc cấu hình so với mã). Grunt dựa trên cấu hình các nhiệm vụ độc lập riêng biệt, mỗi tác vụ sẽ mở / xử lý / đóng tệp. Gulp yêu cầu ít mã hơn và dựa trên các luồng Node, cho phép nó xây dựng các chuỗi ống (w / o mở lại cùng một tệp) và làm cho nó nhanh hơn.
  • webpack (webpack-dev-server) - đối với tôi đó là một nhân vật nhiệm vụ với tải lại nóng các thay đổi cho phép bạn quên tất cả các trình theo dõi JS / CSS.
  • npm/bower + plugins có thể thay thế người chạy nhiệm vụ. Khả năng của họ thường xuyên giao nhau nên có những tác động khác nhau nếu bạn cần sử dụng gulp/grunt kết thúc npm + plugin. Nhưng các tác vụ chạy nhiệm vụ chắc chắn tốt hơn cho các tác vụ phức tạp (ví dụ: "trên mỗi bản dựng tạo, chuyển từ ES6 sang ES5, chạy nó ở tất cả trình giả lập trình duyệt, tạo ảnh chụp màn hình và triển khai tới dropbox thông qua ftp").
  • browserify cho phép các mô-đun nút đóng gói cho trình duyệt. browserify so với node'S require thực sự là AMD vs CommonJS.

Câu hỏi:

  1. Những gì là webpack & webpack-dev-server? Tài liệu chính thức cho biết đó là một gói phần mềm mô-đun nhưng đối với tôi nó chỉ là một nhân vật nhiệm vụ. Có gì khác biệt?
  2. Bạn sẽ dùng ở đâu browserify? Chúng ta không thể làm tương tự với các nút nhập / ES6? 
  3. Khi nào bạn sẽ sử dụng gulp/grunt kết thúc npm + plugins?
  4. Vui lòng cung cấp các ví dụ khi bạn cần sử dụng kết hợp

1507
2018-01-28 13:28


gốc


thời gian để thêm vào rollup? - gman
đây là một câu hỏi rất hợp lý. giả mạo web-giả như tôi vấp ngã trên tất cả các gói được thực hiện trong một thời trang hàng tuần .. - Simon Dirmeier
hackernoon.com/… - Fisherman
@ Fisherman Tôi hoàn toàn mới với điều này, và có vẻ như hoàn toàn các loại hạt ... - David Stosik
@Fisherman Các "đề nghị" bình luận tôi chỉ đọc thậm chí còn tồi tệ hơn! D: Tôi chỉ muốn xây dựng một trang tĩnh fricking sử dụng một vài CSS / JS libs, và sẽ được hưởng lợi từ việc có một công cụ có thể biên dịch với nhau ... Ném vào một số công cụ tạo khuôn mẫu để cung cấp phần còn lại cho Ctrl-C của tôi / Ctrl-V ngón tay, và đó sẽ là hoàn hảo ... Tuy nhiên, giờ vào nó, vẫn cố gắng tìm một cách để đi ... - David Stosik


Các câu trả lời:


Webpack và Browserify

Webpack và Browserify thực hiện khá nhiều công việc giống nhau, đó là xử lý mã của bạn để được sử dụng trong môi trường đích (chủ yếu là trình duyệt, mặc dù bạn có thể nhắm mục tiêu các môi trường khác như Node). Kết quả của quá trình xử lý như vậy là một hoặc nhiều  - tập lệnh được lắp ráp phù hợp với môi trường được nhắm mục tiêu.

Ví dụ: giả sử bạn đã viết mã ES6 được chia thành các mô-đun và muốn có thể chạy nó trong trình duyệt. Nếu các mô-đun đó là các mô-đun Nút, trình duyệt sẽ không hiểu chúng vì chúng chỉ tồn tại trong môi trường Nút. Các mô-đun ES6 cũng sẽ không hoạt động trong các trình duyệt cũ hơn như IE11. Hơn nữa, bạn có thể đã sử dụng các tính năng ngôn ngữ thử nghiệm (các đề xuất tiếp theo của ES) mà các trình duyệt không triển khai thực hiện để chạy tập lệnh như vậy sẽ chỉ gây ra lỗi. Những công cụ như Webpack và Browserify giải quyết những vấn đề này bằng cách dịch mã như vậy sang trình duyệt biểu mẫu có thể thực thi. Ngày đầu đó, họ làm cho nó có thể áp dụng một loạt lớn các tối ưu hóa trên những bó.

Tuy nhiên, Webpack và Browserify khác nhau theo nhiều cách, Webpack cung cấp nhiều công cụ theo mặc định (ví dụ: tách mã), trong khi Browserify chỉ có thể thực hiện việc này sau khi tải xuống plugin nhưng sử dụng cả hai khách hàng tiềm năng cho kết quả rất giống nhau. Nó đi xuống để sở thích cá nhân (Webpack là trendier). Btw, Webpack không phải là một nhân vật nhiệm vụ, nó chỉ là bộ vi xử lý các tệp của bạn (nó xử lý chúng bằng các trình tải và các trình cắm thêm) và nó có thể chạy (trong số các cách khác) bởi một nhân viên nhiệm vụ.


Máy chủ Webpack Dev

Webpack Dev Server cung cấp giải pháp tương tự cho Browsersync - một máy chủ phát triển, nơi bạn có thể triển khai ứng dụng của mình nhanh chóng khi bạn đang làm việc trên đó và xác minh tiến trình phát triển của bạn ngay lập tức với máy chủ dev tự động làm mới trình duyệt trên các thay đổi mã hoặc thậm chí truyền mã đã thay đổi mà không cần tải lại với cái gọi là thay thế mô-đun nóng.


Trình chạy tác vụ so với tập lệnh NPM

Tôi đã sử dụng Gulp để viết gọn gàng và dễ dàng, nhưng sau này tôi phát hiện ra tôi không cần Gulp cũng như Grunt. Mọi thứ tôi từng cần có thể được thực hiện bằng cách sử dụng các tập lệnh NPM để chạy các công cụ của bên thứ ba thông qua API của họ. Lựa chọn giữa các kịch bản Gulp, Grunt hoặc NPM tùy thuộc vào sở thích và trải nghiệm của nhóm của bạn.

Trong khi các nhiệm vụ trong Gulp hoặc Grunt dễ đọc ngay cả đối với những người không quen thuộc với JS, thì đó là một công cụ khác để yêu cầu và học hỏi và cá nhân tôi thích thu hẹp sự phụ thuộc của tôi và làm cho mọi việc trở nên đơn giản. Mặt khác, thay thế các tác vụ này bằng cách kết hợp các kịch bản lệnh NPM và các kịch bản lệnh (propably JS) chạy các công cụ của bên thứ ba đó (ví dụ: Node script configure and running rimraf vì mục đích làm sạch) có thể khó khăn hơn. Nhưng trong phần lớn các trường hợp, ba kết quả này đều bằng nhau về kết quả.


Ví dụ

Đối với các ví dụ, tôi khuyên bạn nên xem xét điều này Dự án khởi động phản ứng, cho bạn thấy sự kết hợp tuyệt vời giữa các kịch bản NPM và JS bao trùm toàn bộ quá trình xây dựng và triển khai. Bạn có thể tìm thấy các tập lệnh NPM đó trong package.json trong thư mục gốc, trong một thuộc tính có tên scripts. Ở đó bạn hầu như sẽ gặp các lệnh như babel-node tools/run start. Babel-nút là một công cụ CLI (không có nghĩa là để sử dụng sản xuất), mà lúc đầu biên dịch tập tin ES6 tools/run (tệp run.js nằm trong công cụ) - về cơ bản là một tiện ích Á hậu. Á hậu này có chức năng như một đối số và thực hiện nó, trong trường hợp này là start - Tiện ích khác (start.js) chịu trách nhiệm đóng gói các tệp nguồn (cả máy khách và máy chủ) và khởi động ứng dụng và máy chủ phát triển (máy chủ dev có thể là Webpack Dev Server hoặc Browsersync).

Nói chính xác hơn, start.js tạo cả các gói phía máy khách và máy chủ, bắt đầu máy chủ tốc hành và sau khi khởi động thành công, đồng bộ hóa trình duyệt, tại thời điểm viết giống như thế này (vui lòng tham khảo dự án khởi động phản ứng cho mã mới nhất).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

Phần quan trọng là proxy.target, nơi họ đặt địa chỉ máy chủ mà họ muốn proxy, có thể là http: // localhost: 3000và Browsersync bắt đầu một máy chủ lắng nghe http: // localhost: 3001, nơi các tài sản được tạo ra được phục vụ với phát hiện thay đổi tự động và thay thế mô-đun nóng. Như bạn có thể thấy, có một thuộc tính cấu hình khác files với các tệp hoặc mẫu riêng lẻ Đồng bộ hóa đồng bộ hóa trình duyệt để thay đổi và tải lại trình duyệt nếu một số xảy ra, nhưng như nhận xét cho biết, Webpack tự quan tâm xem nguồn js bằng HMR, vì vậy chúng hợp tác ở đó.

Bây giờ tôi không có bất kỳ ví dụ tương đương nào về cấu hình Grunt hoặc Gulp như vậy, nhưng với Gulp (và hơi tương tự với Grunt), bạn sẽ viết các tác vụ riêng lẻ trong gulpfile.js như

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

nơi bạn sẽ thực hiện khá nhiều thứ giống như trong bộ khởi động, lần này với nhiệm vụ, giải quyết một số vấn đề cho bạn, nhưng trình bày các vấn đề của chính nó và một số khó khăn trong quá trình học cách sử dụng, và như tôi nói, bạn càng có nhiều phụ thuộc, thì càng có nhiều sai lầm. Và đó là lý do tôi muốn loại bỏ những công cụ như vậy.


796
2018-01-28 14:34



câu trả lời chính xác! Có thể bạn mô tả pls trong đó cách webpack / trình duyệt quản lý mô-đun nút tái sử dụng tại trình duyệt xin vui lòng? - Volodymyr Bakhmatiuk
Webpack lắp ráp các phụ thuộc (các giá trị mô-đun đã xuất) vào đối tượng (các tệp đã cài đặt). Mỗi mô-đun là do đó tài sản của đối tượng và tên của tài sản đó đại diện cho id của nó (ví dụ: 1, 2, 3 ... vv). Mỗi khi bạn yêu cầu mô-đun như vậy trong nguồn của bạn, webpack chuyển đổi giá trị thành lời gọi hàm với id mô-đun trong đối số (ví dụ: __webpack_require __ (1)), trả về phụ thuộc đúng dựa trên tìm kiếm trong tệp đã cài đặt bằng id mô-đun. Tôi không chắc chắn, cách Browserify xử lý nó. - Dan Macák
@Dan Skočdopole Bạn có thể xây dựng thêm? - Asim K T
Tôi không đồng ý với việc trình bày cách sử dụng cơ bản của gulp hoặc grunt, hai thứ này rất dễ so sánh khi sử dụng google, webpack-dev-server yêu cầu phải hiểu webpack trước, và điều đó nằm ngoài phạm vi của câu hỏi / trả lời này, nhưng tôi đã trình bày một số cấu hình của Trình duyệt. Bạn có quyền với bộ khởi động, và tôi xây dựng thêm nó. - Dan Macák
1 để giảm sự phụ thuộc để giữ cho mọi thứ đơn giản hơn là theo ý kiến ​​phổ biến (nhiều hơn) rằng mỗi gói mới phải được sử dụng! - madannes


Cập nhật tháng 6 năm 2018

Việc học JavaScript hiện đại thật khó khăn nếu bạn chưa có mặt ở đó từ đầu. Nếu bạn là người mới, hãy nhớ kiểm tra điều này bằng văn bản tuyệt vời để có cái nhìn tổng quan tốt hơn.

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

Cập nhật tháng 7 năm 2017

Gần đây tôi đã tìm thấy một hướng dẫn thực sự toàn diện từ nhóm Grab về cách tiếp cận phát triển front-end vào năm 2017. Bạn có thể kiểm tra nó như dưới đây.

https://github.com/grab/front-end-guide


Tôi cũng đã tìm kiếm điều này khá lâu vì có rất nhiều công cụ ở đó và mỗi công cụ đều mang lại lợi ích cho chúng tôi ở một khía cạnh khác. Cộng đồng được chia thành các công cụ như Browserify, Webpack, jspm, Grunt and Gulp. Bạn cũng có thể nghe về Yeoman or Slush. Đó không thực sự là một vấn đề, nó chỉ gây nhầm lẫn cho mọi người cố hiểu một con đường rõ ràng.

Dù sao, tôi muốn đóng góp một cái gì đó.

1. Quản lý gói 

Trình quản lý gói đơn giản hóa việc cài đặt và cập nhật các phụ thuộc dự án, đó là các thư viện như: jQuery, Bootstrap, v.v. - mọi thứ được sử dụng trên trang web của bạn và không phải do bạn viết.

Duyệt tất cả các trang web thư viện, tải xuống và giải nén các tệp lưu trữ, sao chép tệp vào các dự án - tất cả điều này được thay thế bằng một vài lệnh trong thiết bị đầu cuối.

  • NPM viết tắt của: Node JS package manager giúp bạn quản lý tất cả các thư viện mà phần mềm của bạn dựa vào. Bạn sẽ xác định nhu cầu của bạn trong một tập tin gọi là package.json và chạy npm install trong dòng lệnh ... sau đó BANG, các gói của bạn được tải xuống và sẵn sàng để sử dụng. Có thể được sử dụng cả cho front-end and back-end thư viện.

  • Bower: đối với quản lý gói front-end, khái niệm này giống với NPM. Tất cả các thư viện của bạn được lưu trữ trong một tệp có tên bower.json và sau đó chạy bower install trong dòng lệnh.

Sự khác biệt lớn nhất giữa Bower và NPM là NPM đã lồng nhau   cây phụ thuộc trong khi Bower yêu cầu một cây phụ thuộc bằng phẳng như dưới đây.

Trích dẫn từ Sự khác nhau giữa Bower và npm là gì?

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Bower

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Có một số cập nhật trên npm 3 Duplication and Deduplication,   vui lòng mở tài liệu để biết thêm chi tiết.

  • Yarn: Trình quản lý gói mới cho JavaScript  được phát hành bởi Facebook gần đây với một số lợi thế hơn so với NPM. Và với Yarn, bạn vẫn có thể sử dụng cả hai NPMBower đăng ký để tìm nạp gói. Nếu bạn đã cài đặt một gói trước đó, yarn tạo bản sao được lưu trong bộ nhớ cache tạo điều kiện offline package installs.

  • jspm: là người quản lý gói cho SystemJS bộ nạp mô-đun phổ quát, được xây dựng trên đầu trang của động ES6 bộ nạp mô-đun. Nó không phải là một trình quản lý gói hoàn toàn mới với bộ quy tắc riêng của nó, thay vì nó hoạt động trên các nguồn gói hiện có. Ra khỏi hộp, nó hoạt động với GitHub và npm. Như hầu hết các Bower các gói dựa trên dựa trên GitHub, chúng tôi có thể cài đặt các gói đó bằng jspm cũng. Nó có một đăng ký liệt kê hầu hết các gói front-end thường được sử dụng để cài đặt dễ dàng hơn.

Xem sự khác biệt giữa Bower và jspm:    Trình quản lý gói: Bower vs jspm


2. Module Loader / Bundling

Hầu hết các dự án của bất kỳ quy mô nào đều sẽ có sự phân chia mã của họ giữa một số tệp. Bạn chỉ có thể bao gồm từng tệp với một cá nhân <script> tuy nhiên, <script> thiết lập kết nối http mới và đối với các tệp nhỏ - đó là mục tiêu của mô đun - thời gian thiết lập kết nối có thể mất nhiều thời gian hơn đáng kể so với chuyển dữ liệu. Trong khi các tập lệnh đang tải xuống, không có nội dung nào có thể được thay đổi trên trang.

  • Vấn đề thời gian tải xuống phần lớn có thể được giải quyết bằng cách nối một nhóm các mô-đun đơn giản vào một tệp duy nhất và rút gọn nó.

Ví dụ

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • Hiệu suất đi kèm với các chi phí của sự linh hoạt mặc dù. Nếu các mô-đun của bạn có sự phụ thuộc lẫn nhau, sự thiếu linh hoạt này có thể là một showstopper.

Ví dụ

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

Máy tính có thể làm điều đó tốt hơn bạn có thể, và đó là lý do tại sao bạn nên sử dụng một công cụ để tự động nhóm mọi thứ vào một tệp duy nhất.

Sau đó chúng tôi nghe nói về RequireJS, Browserify, Webpack và SystemJS

  • RequireJS: là một JavaScript tệp và trình nạp mô-đun. Nó được tối ưu hóa để sử dụng trong trình duyệt, nhưng nó có thể được sử dụng trong các môi trường JavaScript khác, như Node.

Ví dụ: myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

Trong main.js, chúng ta có thể nhập myModule.js như phụ thuộc và sử dụng nó.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

Và sau đó trong HTML, chúng tôi có thể tham khảo để sử dụng với RequireJS.

<script src=“app/require.js” data-main=“main.js” ></script>

Đọc thêm về CommonJS và AMD để hiểu dễ dàng.    Mối quan hệ giữa CommonJS, AMD và RequireJS?

  • Browserify: đặt ra để cho phép sử dụng CommonJS định dạng mô-đun trong trình duyệt. Hậu quả là, Browserify không phải là trình tải mô đun nhiều như một trình bao gói mô-đun: Browserify hoàn toàn là công cụ tạo thời gian, tạo một gói mã có thể được tải phía máy khách.

Bắt đầu với một máy xây dựng có nút & npm được cài đặt và nhận gói:

npm install -g –save-dev browserify

Viết mô-đun của bạn trong CommonJSđịnh dạng

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

Và khi hạnh phúc, hãy ra lệnh để đóng gói:

browserify entry-point.js -o bundle-name.js

Browserify đệ quy tìm tất cả các phụ thuộc của entry-point và lắp ráp chúng vào một file duy nhất:

<script src=”bundle-name.js”></script>
  • Webpack: Nó bao gồm tất cả các nội dung tĩnh của bạn, bao gồm JavaScript, hình ảnh, CSS và nhiều hơn nữa, thành một tệp duy nhất. Nó cũng cho phép bạn xử lý các tệp thông qua các loại trình tải khác nhau. Bạn có thể viết JavaScript với CommonJS hoặc là AMD mô-đun cú pháp. Nó tấn công vấn đề xây dựng theo cách cơ bản và được cân nhắc hơn. Trong Browserify bạn dùng Gulp/Grunt và một danh sách dài các biến đổi và bổ sung để hoàn thành công việc. Webpack cung cấp đủ năng lượng ra khỏi hộp mà bạn thường không cần Grunt hoặc là Gulp ở tất cả.

Việc sử dụng cơ bản vượt quá đơn giản. Cài đặt Webpack như Browserify:

npm install -g –save-dev webpack

Và truyền lệnh cho một điểm vào và một tệp đầu ra:

webpack ./entry-point.js bundle-name.js
  • SystemJS: là trình tải mô-đun có thể nhập mô-đun vào thời gian chạy ở bất kỳ định dạng phổ biến nào được sử dụng hôm nay (CommonJS, UMD, AMD, ES6). Nó được xây dựng trên đầu trang của ES6 module loader polyfill và đủ thông minh để phát hiện định dạng đang được sử dụng và xử lý nó một cách thích hợp. SystemJS cũng có thể transpile mã ES6 (với Babel hoặc là Traceur) hoặc các ngôn ngữ khác như TypeScript và CoffeeScript sử dụng plugin.

Bạn muốn biết cái gì là node module và tại sao nó không được điều chỉnh cho phù hợp với trình duyệt.

Bài viết hữu ích hơn:


Tại sao jspm và SystemJS?

Một trong những mục tiêu chính của ES6 mô đun là làm cho nó thực sự đơn giản   cài đặt và sử dụng bất kỳ thư viện Javascript nào từ bất kỳ đâu trên   Internet (Github, npm, v.v.) Chỉ cần hai thứ:

  • Một lệnh duy nhất để cài đặt thư viện
  • Một dòng mã để nhập thư viện và sử dụng nó

Vì vậy jspm, bạn có thể làm được.

  1. Cài đặt thư viện bằng lệnh: jspm install jquery
  2. Nhập thư viện với một dòng mã, không cần tham chiếu bên ngoài bên trong tệp HTML của bạn.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Sau đó, bạn định cấu hình những thứ này bên trong System.config({ ... }) trước   nhập mô-đun của bạn. Thông thường khi chạy jspm init, sẽ có một tập tin   có tên config.js vì mục đích này.

  2. Để làm cho các tập lệnh này chạy, chúng tôi cần tải system.js và config.js trên trang HTML. Sau đó chúng tôi sẽ tải display.js tập tin sử dụng   các SystemJS bộ nạp mô-đun.

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

Lưu ý: Bạn cũng có thể sử dụng npm với Webpack như Angular 2 đã áp dụng nó. Vì jspm được phát triển để tích hợp với SystemJS và nó hoạt động trên đầu trang npm nguồn, do đó, câu trả lời của bạn là tùy thuộc vào bạn.


3. Á hậu nhiệm vụ

Trình chạy tác vụ và công cụ xây dựng chủ yếu là các công cụ dòng lệnh. Tại sao chúng ta cần sử dụng chúng: Trong một từ: tự động hóa. Bạn càng phải làm ít công việc khi thực hiện các tác vụ lặp đi lặp lại như rút gọn, biên dịch, thử nghiệm đơn vị, lintingmà trước đây chúng tôi phải mất rất nhiều thời gian để thực hiện với dòng lệnh hoặc thậm chí là thủ công.

  • Grunt: Bạn có thể tạo tự động hóa cho môi trường phát triển của mình để xử lý trước các mã hoặc tạo các kịch bản lệnh xây dựng bằng một tệp cấu hình và có vẻ như rất khó xử lý một tác vụ phức tạp. Phổ biến trong vài năm qua.

Mọi công việc trong Grunt là một loạt các cấu hình plugin khác nhau, mà chỉ đơn giản là được thực hiện cái khác, trong một thời trang độc lập, chặt chẽ và tuần tự.

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
  • Gulp: Tự động hóa giống như Grunt nhưng thay vì cấu hình, bạn có thể viết JavaScript với các luồng như đó là một ứng dụng nút. Ưu tiên những ngày này.

Đây là một Gulp tuyên bố nhiệm vụ mẫu.

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Xem thêm: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri


4. Công cụ giàn giáo

  • Slush and Yeoman: Bạn có thể tạo dự án khởi động với chúng. Ví dụ, bạn đang có kế hoạch xây dựng một mẫu thử nghiệm với HTML và SCSS, sau đó thay vì tự tạo một số thư mục như scss, css, img, phông chữ. Bạn chỉ có thể cài đặt yeoman và chạy một tập lệnh đơn giản. Sau đó, tất cả mọi thứ ở đây cho bạn.

Tìm thêm đây.

npm install -g yo
npm install --global generator-h5bp
yo h5bp

Xem thêm: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express


Câu trả lời của tôi không thực sự phù hợp với nội dung của câu hỏi nhưng khi tôi tìm kiếm những kiến ​​thức này trên Google, tôi luôn nhìn thấy câu hỏi ở trên để tôi quyết định trả lời tóm tắt. Hy vọng các bạn thấy nó hữu ích.


552
2017-10-03 06:23



siêu hữu ích! cảm ơn! - Bobo
Người đàn ông, đây phải là câu trả lời được chấp nhận. Rất ngắn gọn (có tính đến số lượng chủ đề bạn thực sự đề cập) và rõ ràng. Cám ơn. - Anton
Câu trả lời có cấu trúc rất rõ ràng và rõ ràng - Danail
Cảm ơn bạn đã dành thời gian, rất hữu ích. - Herick
Câu trả lời tuyệt vời với rất nhiều thông tin và thực sự được cập nhật. - blfuentes


Bạn có thể tìm thấy một số so sánh kỹ thuật trên npmcompare

So sánh trình duyệt so với grunt so với gulp so với webpack

Như bạn có thể thấy webpack được duy trì rất tốt với một phiên bản mới sắp ra mỗi 4 ngày trung bình. Nhưng Gulp dường như có cộng đồng lớn nhất trong số họ (với hơn 20 nghìn ngôi sao trên Github) Grunt có vẻ hơi bị bỏ quên (so với những người khác)

Vì vậy, nếu cần phải chọn một trong những khác tôi sẽ đi với Gulp


45
2018-05-01 09:04



Cảm ơn! Tôi đã nghiên cứu về tất cả các công cụ này trong một thời gian và ở cuối trang này đã rút ngắn nghiên cứu của tôi bằng một cảnh quay dài. Mức độ phổ biến và dễ sử dụng đã làm sáng tỏ mọi thứ khác, ít nhất là trong trường hợp của tôi. - Amy Pellegrini
webpack bây giờ là 26k bắt đầu trên Github và gulp với 25.7k. Không thể sử dụng yếu tố phổ biến để quyết định nữa ... - RLaaa


ĐƯỢC, tất cả họ đều có một số điểm tương đồng, họ làm những điều tương tự cho bạn theo những cách khác nhau và tương tự, tôi chia chúng thành 3 nhóm chính như sau:


1) Trình cắm mô-đun 

webpack và trình duyệt như những người nổi tiếng, hoạt động giống như người chạy tác vụ nhưng với tính linh hoạt hơn, nó sẽ kết hợp mọi thứ lại với nhau như cài đặt của bạn, vì vậy bạn có thể trỏ đến kết quả là bundle.js ví dụ trong một tệp duy nhất bao gồm CSS và Javascript, biết thêm chi tiết về từng chi tiết, hãy xem chi tiết bên dưới:

webpack

webpack là một gói phần mềm cho các ứng dụng JavaScript hiện đại. Khi nào   webpack xử lý ứng dụng của bạn, nó đệ quy xây dựng một phụ thuộc   biểu đồ bao gồm mọi mô-đun mà ứng dụng của bạn cần, sau đó gói   tất cả các mô-đun đó thành một số lượng nhỏ các gói - thường chỉ có một -   được trình duyệt tải.

Nó là cấu hình cực kỳ, nhưng để bắt đầu, bạn chỉ cần   hiểu bốn khái niệm cốt lõi: nhập, xuất, tải và bổ sung.

Tài liệu này nhằm cung cấp tổng quan cấp cao về các tài liệu này   khái niệm, trong khi cung cấp liên kết đến khái niệm chi tiết cụ thể   trường hợp sử dụng.

hơn đây

trình duyệt

Browserify là một công cụ phát triển cho phép chúng ta viết kiểu node.js   mô-đun biên dịch để sử dụng trong trình duyệt. Cũng giống như nút, chúng tôi viết   các mô-đun của chúng tôi trong các tệp riêng biệt, xuất các phương thức bên ngoài và   các thuộc tính bằng cách sử dụng các biến module.exports và export. Chúng ta thậm chí có thể   yêu cầu các mô-đun khác sử dụng hàm require và nếu chúng ta bỏ qua   đường dẫn tương đối, nó sẽ phân giải thành mô-đun trong node_modules   danh mục.

hơn đây


2) Người chạy nhiệm vụ 

gulp và grunt là những người chạy tác vụ, về cơ bản những gì họ làm, tạo nhiệm vụ và chạy chúng bất cứ khi nào bạn muốn, ví dụ bạn cài đặt plugin để rút gọn CSS của bạn và sau đó chạy nó mỗi lần để giảm thiểu, chi tiết hơn về mỗi:

gulp

gulp.js là một bộ công cụ JavaScript mã nguồn mở bởi Fractal Innovations   và cộng đồng nguồn mở tại GitHub, được sử dụng làm công cụ phát trực tuyến   hệ thống trong phát triển web front-end. Nó là một nhiệm vụ Á hậu được xây dựng trên   Node.js và Node Package Manager (npm), được sử dụng để tự động hóa   nhiệm vụ tốn thời gian và lặp đi lặp lại liên quan đến phát triển web như   khai thác, ghép nối, bộ nhớ cache busting, kiểm tra đơn vị, linting,   gulp tối ưu hóa sử dụng cách tiếp cận cấu hình mã để   xác định các nhiệm vụ của nó và dựa vào các plugin nhỏ, đơn lẻ của nó để   Mang chúng ra. hệ sinh thái gulp có hơn 1000 plugin như vậy   để lựa chọn.

hơn đây

tiếng càu nhàu

Grunt là một Á hậu nhiệm vụ JavaScript, một công cụ được sử dụng để tự động   thực hiện các tác vụ thường được sử dụng như rút gọn, biên dịch, đơn vị   thử nghiệm, linting, vv Nó sử dụng một giao diện dòng lệnh để chạy tùy chỉnh   các tác vụ được định nghĩa trong một tệp (được gọi là Gruntfile). Grunt được tạo bởi   Ben Alman và được viết bằng Node.js. Nó được phân phối qua npm.   Hiện tại, có hơn năm nghìn plugin có sẵn trong   Hệ sinh thái Grunt.

hơn đây


3) Người quản lý gói 

quản lý gói, những gì họ làm là quản lý các plugin bạn cần trong ứng dụng của mình và cài đặt chúng cho bạn thông qua github, v.v. bằng cách sử dụng package.json, rất tiện dụng để cập nhật mô-đun, cài đặt chúng và chia sẻ ứng dụng của bạn, chi tiết hơn cho từng ứng dụng:

npm

npm là một trình quản lý gói cho ngôn ngữ lập trình JavaScript. Nó   là trình quản lý gói mặc định cho môi trường chạy JavaScript   Node.js. Nó bao gồm một máy khách dòng lệnh, còn được gọi là npm và một   cơ sở dữ liệu trực tuyến của các gói công khai, được gọi là đăng ký npm. Các   đăng ký được truy cập thông qua máy khách và các gói có sẵn có thể   duyệt và tìm kiếm qua trang web npm.

hơn đây

bower

Bower có thể quản lý các thành phần chứa HTML, CSS, JavaScript, phông chữ   hoặc thậm chí các tệp hình ảnh. Bower không nối hoặc rút ngắn mã hoặc làm   bất cứ điều gì khác - nó chỉ cài đặt đúng phiên bản của các gói   bạn cần và sự phụ thuộc của họ.   Để bắt đầu, Bower hoạt động bằng cách tìm nạp và cài đặt các gói từ   trên tất cả, chăm sóc săn bắn, tìm kiếm, tải xuống và lưu   những thứ bạn đang tìm kiếm. Bower theo dõi các gói này trong một   tệp kê khai, bower.json.

hơn đây

và trình quản lý gói gần đây nhất không nên bỏ qua, nó còn trẻ và nhanh trong môi trường làm việc thực tế so với npm mà tôi đã sử dụng trước đây, để cài đặt lại các mô-đun, nó kiểm tra gấp đôi thư mục node_modules để kiểm tra sự tồn tại của mô-đun, cũng có vẻ như cài đặt các mô-đun mất ít thời gian hơn:

sợi

Sợi là trình quản lý gói cho mã của bạn. Nó cho phép bạn sử dụng và   chia sẻ mã với các nhà phát triển khác từ khắp nơi trên thế giới. Sợi thực hiện điều này   một cách nhanh chóng, an toàn và đáng tin cậy để bạn không bao giờ phải lo lắng.

Sợi cho phép bạn sử dụng các giải pháp của các nhà phát triển khác để khác nhau   vấn đề, giúp bạn phát triển phần mềm dễ dàng hơn. nếu bạn   gặp sự cố, bạn có thể báo cáo sự cố hoặc đóng góp lại và khi   vấn đề là cố định, bạn có thể sử dụng sợi để giữ cho nó tất cả đến nay.

Mã được chia sẻ thông qua một cái gì đó gọi là một gói (đôi khi được gọi là   để làm mô-đun). Một gói chứa tất cả mã đang được chia sẻ   dưới dạng tệp package.json mô tả gói.

hơn đây



42
2018-05-21 03:43



Có danh sách các plugin gulp không? có thực sự 1000+? npm chỉ trả về 20 hoặc hơn? - flurbius
Tóm tắt tuyệt vời. Nên là một điểm khởi đầu cho bất kỳ cuộc thảo luận nào về sự phát triển web hiện đại. - Adam Bubela
@flurbius Có, tại đây: gulpjs.com/plugins. Hiện tại có 3.465 plugin Gulp. - martias


Một lưu ý nhỏ về npm: npm3 cố gắng cài đặt các phụ thuộc theo cách phẳng

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution


40
2018-04-14 15:53



npm2 cung cấp dedupe tùy chọn để làm điều tương tự - Matej Svajger


Webpack & webpack-dev-server là gì? Tài liệu chính thức cho biết đó là một gói phần mềm mô-đun nhưng đối với tôi nó chỉ là một nhân vật nhiệm vụ. Có gì khác biệt?

webpack-dev-server là một máy chủ web tải lại trực tiếp Webpack các nhà phát triển sử dụng để nhận phản hồi ngay lập tức những gì họ làm. Nó chỉ nên được sử dụng trong quá trình phát triển.

Dự án này được lấy cảm hứng từ nof5 công cụ kiểm tra đơn vị.

Webpack như tên của nó sẽ tạo ra ĐỘC THÂN  đóng góituổi cho web. Gói này sẽ được thu nhỏ và kết hợp thành một tệp duy nhất (chúng tôi vẫn đang sống trong HTTP 1.1 tuổi). Webpack làm phép thuật kết hợp các tài nguyên (JavaScript, CSS, hình ảnh) và tiêm chúng như thế này: <script src="assets/bundle.js"></script>.

Nó cũng có thể được gọi là -máy đóng gói mô-đun bởi vì nó phải hiểu các phụ thuộc của mô-đun và cách lấy các phụ thuộc và gộp chúng lại với nhau.

Bạn sẽ sử dụng trình duyệt ở đâu? Chúng ta không thể làm tương tự với các nút nhập / ES6?

Bạn đã có thể sử dụng Trình duyệt trên cùng một nhiệm vụ mà bạn sẽ sử dụng Webpack. - - Webpack là nhỏ gọn hơn, mặc dù.

Lưu ý rằng Các tính năng của trình nạp mô-đun ES6 trong Webpack2 đang sử dụng System.import, không phải một trình duyệt duy nhất hỗ trợ nguyên bản.

Khi nào bạn sử dụng gulp / grunt qua npm + plugins?

Bạn có thể quên  Gulp, Grunt, Brokoli, Brunch và Bower. Trực tiếp sử dụng các kịch bản dòng lệnh npm thay vào đó và bạn có thể loại bỏ các gói bổ sung như thế này ở đây để Gulp:

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

Bạn có thể sử dụng Gulp và Tiếng càu nhàu tạo tệp cấu hình khi tạo tệp cấu hình cho dự án của bạn. Bằng cách này bạn không cần phải cài đặt Yeoman hoặc các công cụ tương tự.


10
2017-11-22 01:23





Sợi là một người quản lý gói gần đây mà có lẽ xứng đáng được đề cập. Vì vậy, ở đó: https://yarnpkg.com/

Afaik, nó có thể lấy cả phụ thuộc vào npm và bower và có các tính năng được đánh giá cao khác.


9
2017-10-14 15:58





StackShare cung cấp một side-by-side (hoặc xếp chồng lên nhau) của ba công cụ cùng một lúc.

Ở đây nó là dành cho npm so với Bower so với Browserify va cho gulp so với Webpack so với Grunt

Trên các trang so sánh này, bạn có thể tìm thấy những điều sau:

  • số phiếu bầu đã nhận được từ cộng đồng StackShare
  • công ty nào sử dụng chúng trong ngăn xếp công nghệ của họ
  • mức lãi suất cho từng thời gian
  • ưu cho mỗi công cụ

4
2018-05-30 14:31





Webpack là một người đóng gói. Như Browserfy nó tìm trong codebase cho các yêu cầu module (require hoặc là import) và giải quyết chúng một cách đệ quy. Hơn thế nữa, bạn có thể cấu hình Webpack để giải quyết không chỉ các mô-đun giống như JavaScript, mà là CSS, hình ảnh, HTML, nghĩa là mọi thứ. Điều đặc biệt làm tôi phấn khích Webpack, bạn có thể kết hợp cả hai mô đun được biên dịch và được nạp động trong cùng một ứng dụng. Vì vậy, người ta có được một hiệu suất thực sự tăng, đặc biệt là trên HTTP / 1.x. Làm thế nào chính xác bạn làm điều đó tôi mô tả với các ví dụ ở đây http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Là một thay thế cho người đóng gói, người ta có thể nghĩ Rollup.js (https://rollupjs.org/), tối ưu hóa mã trong quá trình biên dịch, nhưng loại bỏ tất cả các khối không sử dụng được tìm thấy.

Dành cho AMD, thay vì RequireJS người ta có thể đi với người bản xứ ES2016 module system, nhưng được nạp với System.js (https://github.com/systemjs/systemjs)

Bên cạnh đó, tôi sẽ chỉ ra rằng npm thường được sử dụng như một công cụ tự động hóa như grunt hoặc là gulp. Kiểm tra https://docs.npmjs.com/misc/scripts. Cá nhân tôi đi ngay bây giờ với các tập lệnh npm chỉ tránh các công cụ tự động hóa khác, mặc dù trước đây tôi đã rất nhiều grunt. Với các công cụ khác, bạn phải dựa vào vô số các plugin cho các gói, thường không được viết tốt và không được duy trì tích cực. npm biết các gói của nó, vì vậy bạn gọi bất kỳ gói nào được cài đặt cục bộ theo tên như sau:

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

Trên thực tế bạn là một quy tắc không cần bất kỳ plugin nếu gói hỗ trợ CLI.


4
2017-08-14 09:43