Cập nhật tháng 10 năm 2018
Nếu bạn vẫn chưa chắc chắn về Front-end dev, có thể xem nhanh một tài nguyên tuyệt vời ở đây.
https://github.com/kamranahmedse/developer-roadmap
Cập nhật tháng 6 năm 2018
Học JavaScript hiện đại là khó khăn nếu bạn không có mặt từ đầu. Nếu bạn là người mới đến, hãy nhớ kiểm tra văn bản xuất sắc này để có cái nhìn tổng quan 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ể xem qua 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ụ này mang lại lợi ích cho chúng tôi ở một khía cạnh khác nhau. Cộng đồng được chia thành các công cụ như thế nào Browserify, Webpack, jspm, Grunt and Gulp. Bạn cũng có thể nghe về Yeoman or Slush. Đó thực sự không phải là một vấn đề, nó chỉ gây nhầm lẫn cho mọi người đang cố gắng hiểu một con đường rõ ràng phía trước.
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 của 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 được viết bởi bạn.
Duyệt tất cả các trang web thư viện, tải xuống và giải nén tài liệu 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.
NPMlà viết tắt của: Node JS package managergiú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 mình trong một tệp được gọi package.jsonvà chạy npm installtrong 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-endcác 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.jsonvà sau đó chạy bower installtrong dòng lệnh.
Sự khác biệt lớn nhất giữa Bowervà NPMlà NPM không có cây phụ thuộc lồng nhau trong khi Bower yêu cầu cây phụ thuộc phẳng như bên dưới.
Trích dẫn từ sự khác biệt 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
Cung cấp
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, xin vui lòng mở tài liệu để biết thêm chi tiết.
Yarn: Một quản lý gói mới cho JavaScript công bố bởi Facebookthời gian gần đây với một số ưu điểm hơn so với NPM. Và với Sợi, bạn vẫn có thể sử dụng cả hai NPMvà Bowerđăng ký để lấy gói. Nếu bạn đã cài đặt một gói trước đó, hãy yarntạo một bản sao được lưu trong bộ nhớ cache để tạo điều kiện offline package installs.
jspm: là trình quản lý gói cho SystemJStrình tải mô-đun phổ quát, được xây dựng bên trên ES6trình tải mô-đun động. 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ào đó nó hoạt động dựa trên các nguồn gói hiện có. Ra khỏi hộp, nó hoạt động với GitHubvà npm. Vì hầu hết các Bowergói dựa trên GitHub, chúng tôi cũng có thể cài đặt các gói đó bằng cách sử dụng jspm. Nó có một sổ đă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 nhau giữa Bowervà jspm:
Trình quản lý gói: Bower vs jspm
2. Bộ nạp / Gói mô-đun
Hầu hết các dự án ở bất kỳ quy mô nào cũng sẽ có mã của chúng được phân chia giữa một số tệp. <script>Tuy nhiên, bạn chỉ có thể bao gồm mỗi tệp với một thẻ riêng lẻ , <script>thiết lập kết nối http mới và cho các tệp nhỏ - đó là mục tiêu của mô đun hóa - thời gian để thiết lập kết nối có thể mất nhiều thời gian hơn so với truyề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ể thay đổi trên trang.
- Vấn đề về thời gian tải xuống phần lớn có thể được giải quyết bằng cách ghép một nhóm các mô-đun đơn giản thành một tệp duy nhất và thu nhỏ nó.
Ví dụ
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Hiệu suất đi kèm với 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 trình diễn.
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 gói mọi thứ vào một tệp.
Sau đó chúng tôi nghe về RequireJS, Browserify, WebpackvàSystemJS
RequireJS: là một JavaScripttrình tải tập tin và 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.jsdưới dạng phụ thuộc và sử dụng nó.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
Và sau đó trong chúng ta HTML, chúng ta 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ề CommonJSvà AMDđể có được sự hiểu biết dễ dàng.
Mối quan hệ giữa CommonJS, AMD và RequireJS?
Browserify: đặt ra để cho phép sử dụng các CommonJSmô-đun được định dạng trong trình duyệt. Do đó, Browserifykhông phải là trình tải mô-đun nhiều như trình đóng gói mô-đun: Browserifyhoàn toàn là một công cụ thời gian xây dựng, tạo ra một bó mã mà sau đó 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ó cài đặt nút & npm và nhận gói:
npm install -g –save-dev browserify
Viết mô-đun của bạn ở 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 để bó:
browserify entry-point.js -o bundle-name.js
Browserify đệ quy tìm tất cả các phụ thuộc của điểm đầu vào và tập hợp chúng thành một tệp duy nhất:
<script src=”bundle-name.js”></script>
Webpack: Nó gói tất cả các tài sản tĩnh của bạn, bao gồm JavaScript, hình ảnh, CSS và hơn thế nữa vào 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 cú pháp của bạn JavaScriptvới CommonJShoặc AMDmô-đun. Nó tấn công vấn đề xây dựng theo cách tích hợp và có nhiều ý kiến hơn. Trong Browserifybạn sử dụng Gulp/Gruntvà một danh sách dài các biến đổi và plugin để hoàn thành công việc. Webpackcung cấp đủ năng lượng ra khỏi hộp mà bạn thường không cần Grunthoặc hoàn Gulptoàn không có.
Sử dụng cơ bản là vượt quá đơn giản. Cài đặt Webpack như Browserify:
npm install -g –save-dev webpack
Và truyền lệnh 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 hiện nay ( CommonJS, UMD, AMD, ES6). Nó được xây dựng trên đỉnh của ES6bộ nạp đa mô-đun 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. SystemJScũng có thể dịch mã ES6 (có Babelhoặc Traceur) hoặc các ngôn ngữ khác như TypeScriptvà CoffeeScriptsử dụng plugin.
Muốn biết cái gì là node modulevà tại sao nó không thích nghi tốt với trình duyệt.
Bài viết hữu ích hơn:
Tại sao jspmvà SystemJS?
Một trong những mục tiêu chính của ES6mô đ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 từ bất cứ nơi nào trên Internet ( Github, npm, vv). Chỉ có hai điều cần thiết:
- Một lệnh duy nhất để cài đặt thư viện
- Một dòng mã duy nhất để nhập thư viện và sử dụng nó
Vì vậy, với jspm, bạn có thể làm điều đó.
- Cài đặt thư viện bằng lệnh:
jspm install jquery
- Nhập thư viện với một dòng mã, không cần tham chiếu bên ngoài trong tệp HTML của bạn.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Sau đó, bạn định cấu hình những thứ này trong System.config({ ... })trước khi nhập mô-đun của bạn. Thông thường khi chạy jspm init, sẽ có một tệp có tên config.jscho mục đích này.
Để làm cho các tập lệnh này chạy, chúng ta cần tải system.jsvà config.jstrên trang HTML. Sau đó, chúng tôi sẽ tải display.jstập tin bằng cách sử dụng SystemJStrình tải 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 npmvới WebpackAngular 2 đã áp dụng nó. Vì jspmđược phát triển để tích hợp với SystemJSvà nó hoạt động dựa trên npmnguồn hiện có , vì vậy câu trả lời của bạn là tùy thuộc vào bạn.
3. Nhiệm vụ chạy
Người 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 việc hơn khi thực hiện các tác vụ lặp đi lặp lại như thu nhỏ , biên dịch, kiểm tra đơn vị, điều mà trước đây chúng ta tốn 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ý mã trước hoặc tạo tập lệnh xây dựng với tệp cấu hình và có vẻ 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 tác vụ trong Gruntlà một loạt các cấu hình plugin khác nhau, chỉ đơn giản là được thực thi lần lượt, theo cách thức độc lập và tuần tự nghiêm ngặ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ư Gruntnhưng thay vì cấu hình, bạn có thể viết JavaScriptvới các luồng như là một ứng dụng nút. Thích những ngày này.
Đây là một Gulptuyê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. Dụng cụ giàn giáo
Slush and Yeoman: Bạn có thể tạo các dự án khởi động với chúng. Ví dụ: bạn đang dự định xây dựng một nguyên mẫu 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 yeomanvà chạy một kịch bản đơn giản. Sau đó, 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-b between-NPM-Bower-Grunt-Godp-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â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 thấy câu hỏi trên đầu để tôi quyết định trả lời tóm tắt. Hy vọng các bạn tìm thấy nó hữu ích.