2018年10月更新
如果您仍然不确定Front-end开发人员，可以在这里快速查看出色的资源。
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 and Gulp。您可能还会听说Yeoman or Slush。这不是一个真正的问题，只是让每个试图理解一条清晰道路的人感到困惑。
无论如何，我想贡献一点。
1.包管理器
程序包管理器简化了项目依赖项的安装和更新，这些依赖项是库，例如：jQuery, Bootstrap等等-在您的站点上使用且未由您编写的所有内容。
浏览所有图书馆网站，下载和解压缩档案，将文件复制到项目中-所有这些都由终端中的一些命令代替。
NPM代表：Node JS package manager帮助您管理软件所依赖的所有库。您将在一个名为的文件中定义您的需求，package.json并npm install在命令行中运行...然后BANG，您的软件包已下载并可以使用。都可用于front-end and back-end库。
Bower：对于前端软件包管理，其概念与NPM相同。您所有的库都存储在一个名为的文件中bower.json，然后bower install在命令行中运行。
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
凉亭
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，请打开文档以获取更多详细信息。
Yarn：最近JavaScript 发布的新软件包管理器，Facebook与相比，它具有更多优势NPM。使用Yarn，您仍然可以同时使用NPM和Bower注册表来获取软件包。如果您以前安装过软件包，yarn创建一个缓存副本，以便于offline package installs。
jspm：是SystemJS在动态ES6模块加载器之上构建的通用模块加载器的软件包管理器。它不是具有自己的一组规则的全新软件包管理器，而是可以在现有软件包源之上运行。开箱即用，它可与GitHub和一起使用npm。由于大多数Bower基础软件包都基于GitHub，因此我们可以使用jspm。它有一个注册表，其中列出了大多数常用的前端软件包，以便于安装。
见之间的不同Bower和jspm：
包管理器：鲍尔VS JSPM
2.模块加载器/捆绑
任何规模的大多数项目的代码都将分为多个文件。您可以只在每个文件中包含一个单独的<script>标签，但是会<script>建立一个新的http连接，对于小型文件（这是模块化的目标），建立连接的时间可能比传输数据要花费更长的时间。在下载脚本时，无法在页面上更改任何内容。
- 下载时间问题可以通过将一组简单模块串联到一个文件中并进行最小化来解决。
例如
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- 但是，性能是以牺牲灵活性为代价的。如果您的模块具有相互依赖性，则缺乏灵活性可能会成为热门。
例如
<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，我们可以参考使用with RequireJS。
<script src=“app/require.js” data-main=“main.js” ></script>
阅读更多有关CommonJS并AMD轻松理解。
CommonJS，AMD和RequireJS之间的关系？
Browserify：开始允许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等）捆绑到一个文件中。它还使您能够通过不同类型的加载程序来处理文件。您可以编写JavaScriptwith CommonJS或AMDmodules语法。它从根本上更加集成和自觉地攻击了构建问题。在Browserify您中，使用Gulp/Grunt一长串的转换和插件来完成工作。Webpack提供了通常不需要Grunt或根本不需要的足够的电源Gulp。
基本用法非常简单。像Browserify一样安装Webpack：
npm install -g –save-dev webpack
并向命令传递一个入口点和一个输出文件：
webpack ./entry-point.js bundle-name.js
SystemJS：是一个模块加载器，可以在运行时以当今（CommonJS, UMD, AMD, ES6）使用的任何流行格式导入模块。它建立在ES6模块加载程序polyfill 之上，并且足够智能，可以检测到所使用的格式并进行适当处理。SystemJS还可以转换ES6代码（使用Babel或Traceur）或其他语言（例如TypeScript和CoffeeScript使用插件）。
想知道是什么node module以及为什么它不适用于浏览器。
更有用的文章：
为什么jspm和SystemJS？
其中一个主要目标，ES6模块化是使其真正简单的安装和使用任何Javascript库从互联网上的任何地方（Github，npm，等）。只需要两件事：
因此jspm，您可以做到。
- 使用以下命令安装库：
jspm install jquery
- 只需单行代码即可导入库，而无需在HTML文件内部进行外部引用。
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
然后，您可以System.config({ ... })在导入模块之前在其中进行配置。通常，在运行时jspm init，将config.js为此目的命名一个文件。
为了使这些脚本运行，我们需要的负载system.js和config.js在HTML页面上。之后，我们将display.js使用SystemJS模块加载器加载文件。
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
注意：您也可以将其npm与WebpackAngular 2一起使用。由于jspm开发是为了与之集成，SystemJS并且可以在现有npm资源的基础上工作，因此您的答案取决于您。
3.任务执行器
任务运行器和构建工具主要是命令行工具。为什么需要使用它们：一句话：自动化。在执行重复性任务（如缩小，编译，单元测试，整理）时，您要做的工作较少，以前，这些操作花费了我们很多时间来处理命令行甚至手动操作。
Grunt：您可以为开发环境创建自动化功能，以预处理代码或使用配置文件创建构建脚本，这似乎很难处理复杂的任务。在最近几年流行。
其中的每个任务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']);
Gulp：自动化就像Grunt配置，而不是配置，您可以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 : //medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4.脚手架工具
Slush and Yeoman：您可以使用它们创建入门项目。例如，您计划使用HTML和SCSS构建原型，而不是手动创建诸如scss，css，img，字体之类的文件夹。您可以只安装yeoman并运行一个简单的脚本。然后，这里的一切都为您服务。
在这里找到更多。
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
我的答案与问题的内容并不完全匹配，但是当我在Google上搜索这些知识时，我总是会在顶部看到该问题，因此我决定对它进行总结。希望你们觉得对您有帮助。