2018年10月更新
如果你对前端开发还不确定，你可以在这里快速查看一个很好的资源。
https://github.com/kamranahmedse/developer-roadmap
2018年6月更新
如果你不是从一开始就接触现代JavaScript，学习它可能会很困难。如果你是新手，请记得查看这篇优秀的文章，以便更好地了解整体情况。
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
2017年7月更新
最近我发现了Grab团队关于2017年前端开发的全面指南。你可以在下面查看。
https://github.com/grab/front-end-guide
我也已经搜索了相当长的时间，因为有很多工具可供选择，而且每个工具在不同方面都对我们有益。社区在像Browserify、Webpack、jspm、Grunt和Gulp这样的工具之间分裂。你可能也听说过Yeoman或Slush。这并不是问题，只是让每个人都很困惑，想要找到一个清晰的前进方向。
无论如何，我想做出一些贡献。
目录
- 目录
- 1. 包管理器
- NPM
- Bower
- Bower和NPM的区别
- Yarn
- jspm
- 2. 模块加载器/打包工具
- RequireJS
- Browserify
- Webpack
- SystemJS
- 3. 任务运行器
- Grunt
- Gulp
- 4. 脚手架工具
- Slush和Yeoman
1. 包管理器
包管理器简化了安装和更新项目依赖的过程，这些依赖是诸如：jQuery, Bootstrap等库，即你网站上使用的非自己编写的内容。
浏览所有库的网站，下载和解压缩文件，将文件复制到项目中——所有这些操作都可以用几个命令在终端中完成。
它代表：Node JS包管理器，帮助您管理软件所依赖的所有库。您可以在一个名为package.json的文件中定义您的需求，然后在命令行中运行npm install...然后，您的包就下载好并准备好使用了。它可以用于前端和后端库。
对于前端包管理，概念与NPM相同。所有库都存储在一个名为bower.json的文件中，然后在命令行中运行bower install。
Bower建议用户迁移到npm或yarn。请小心。
Bower和NPM的区别
Bower和NPM最大的区别在于，NPM使用嵌套的依赖树，而Bower需要使用扁平的依赖树，如下所示。
引用自Bower和npm之间的区别是什么？
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
有一些关于npm 3 Duplication and Deduplication的更新，请打开文档了解更多细节。
最近，Facebook发布了一个新的JavaScript包管理器Yarn，相比于NPM，它具有更多的优势。使用Yarn，您仍然可以使用NPM和Bower注册表来获取包。如果您之前安装过一个包，yarn会创建一个缓存副本，方便进行离线包安装。
JSPM是一个用于SystemJS通用模块加载器的包管理器，建立在动态ES6模块加载器之上。它不是一个全新的包管理器，具有自己的一套规则，而是在现有的包源之上工作。它可以直接与GitHub和npm配合使用。由于大多数基于Bower的包都是基于GitHub的，我们也可以使用jspm来安装这些包。它还有一个注册表，列出了大多数常用的前端包，以便更容易地进行安装。
看看Bower和jspm之间的区别：
包管理器：Bower vs jspm
2. 模块加载器/打包
任何规模的项目都会将代码分散在多个文件中。你可以使用单独的<script>标签包含每个文件，但是<script>会建立一个新的HTTP连接，对于小文件（这是模块化的目标），建立连接所需的时间可能比传输数据的时间还要长。在脚本下载期间，页面上的内容无法更改。
- 通过将一组简单模块连接成一个文件并进行最小化，可以在很大程度上解决下载时间的问题。
E.g
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
性能的提升是以灵活性为代价的。如果你的模块之间存在相互依赖，这种缺乏灵活性可能会成为一个阻碍因素。
E.g
<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>
电脑比你做得更好，这就是为什么你应该使用工具自动将所有内容捆绑成一个单一文件的原因。
然后我们听说了RequireJS、Browserify、Webpack和SystemJS。
RequireJS是一个JavaScript文件和模块加载器。它针对在浏览器中使用进行了优化，但也可以在其他JavaScript环境中使用，比如Node。
例如：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,
};
});
在`main.js`中，我们可以将`myModule.js`作为一个依赖项导入并使用它。
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
然后在我们的HTML中，我们可以使用RequireJS来引用。
<script src=“app/require.js” data-main=“main.js” ></script>
阅读更多关于CommonJS和AMD的内容，以便轻松理解。CommonJS、AMD和RequireJS之间的关系？
旨在允许在浏览器中使用CommonJS格式的模块。因此，Browserify不仅仅是一个模块加载器，更是一个模块打包工具：Browserify完全是一个构建时工具，它生成一束代码，然后可以在客户端加载。
从已安装了node和npm的构建机器开始，并获取该软件包：
npm install -g –save-dev browserify
以 CommonJS 格式编写您的模块
//entry-point.js
var foo = require("../foo.js");
console.log(foo(4));
当你感到开心的时候，就下达打包的指令。
browserify entry-point.js -o bundle-name.js
Browserify递归地查找入口点的所有依赖项，并将它们组装成一个单独的文件。
<script src="”bundle-name.js”"></script>
Webpack将所有静态资源，包括JavaScript、图片、CSS等，打包成一个单独的文件。它还可以通过不同类型的加载器处理文件。你可以使用CommonJS或AMD模块语法编写JavaScript。它以更加整合和有见地的方式解决了构建问题。在Browserify中，你需要使用Gulp/Grunt和一长串的转换和插件来完成工作。Webpack提供了足够的功能，通常你根本不需要Grunt或Gulp。
基本使用非常简单。像使用Browserify一样安装Webpack：
npm install -g –save-dev webpack
传递命令一个入口点和一个输出文件：
webpack ./entry-point.js bundle-name.js
它是一个模块加载器，可以在运行时以任何流行的格式导入模块（CommonJS、UMD、AMD、ES6）。它建立在ES6模块加载器的填充之上，并且足够智能，能够检测使用的格式并进行适当处理。SystemJS还可以使用插件转译ES6代码（使用Babel或Traceur）或其他语言，如TypeScript和CoffeeScript。
想知道什么是node模块以及为什么它不适合在浏览器中使用。
更多有用的文章：
- [链接1](https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4)
- [链接2](http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/)
- [链接3](https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/)
为什么选择jspm和SystemJS？
ES6模块化的主要目标之一是使从互联网的任何地方（Github、npm等）安装和使用任何Javascript库变得非常简单。只需要两个步骤：
1. 一个命令来安装库
2. 一行代码来导入和使用库
所以，使用jspm，你可以做到这一点。
1. 使用命令安装库：jspm install jquery
2. 使用一行代码导入库，无需在HTML文件中引用外部文件。
display.js
var $ = require('jquery');
$('body').append("我已经导入了jQuery！");
然后，在导入模块之前，你需要在System.config({ ... })中配置这些内容。通常在运行jspm init时，会生成一个名为config.js的文件用于此目的。
为了使这些脚本运行，我们需要在HTML页面上加载system.js和config.js。之后，我们将使用SystemJS模块加载器加载display.js文件。
index.html
注意：你也可以使用npm和Webpack，因为Angular 2已经应用了它。由于jspm是为了与SystemJS集成，并且它是在现有的npm源之上工作的，所以你可以根据自己的需求选择。
3. 任务运行器
任务运行器和构建工具主要是命令行工具。为什么我们需要使用它们：简单来说就是自动化。当执行重复性任务时，比如压缩、编译、单元测试、代码检查，使用命令行或者手动操作会花费很多时间，而使用任务运行器可以减少工作量。
你可以通过创建一个配置文件来为开发环境创建自动化流程或者构建脚本，处理复杂的任务似乎很困难。在过去几年中非常流行。
Grunt中的每个任务都是一个包含不同插件配置的数组，它们按照严格独立和顺序执行。
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']);
自动化就像Grunt，但不同的是，你可以像编写Node应用程序一样使用流来编写JavaScript，而不是配置。这是现在比较流行的方式。
这是一个Gulp示例任务声明。
//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);
});
查看更多：https://preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/
4. 脚手架工具
Slush 和 Yeoman
你可以使用它们创建起始项目。例如，如果你计划使用 HTML 和 SCSS 构建一个原型，那么你可以安装 yeoman 并运行一个简单的脚本，而不是手动创建一些文件夹，如 scss、css、img、fonts。然后一切都会为你完成。
在这里找到更多信息here。
npm install -g yo
npm install --global generator-h5bp
yo h5bp
查看更多：https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
我的回答与问题的内容不符，但当我在谷歌上搜索这个知识时，我总是看到这个问题排在前面，所以我决定简要回答一下。
