2018 年 10 月更新
如果您仍然不确定前端开发，您可以在此处快速查看优秀资源。
https://github.com/kamranahmedse/developer-roadmap
2018 年 6 月更新
如果您从一开始就没有接触过现代 JavaScript，那么学习现代 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。包管理器
- NPM
- 鲍尔
-
Bower 和 NPM 之间的区别
- 纱线
- jspm
- 2。模块加载器/捆绑
- RequireJS
- 浏览器
- 网页包
- SystemJS
- 3。任务运行器
- 4。脚手架工具
1。包管理器
包管理器简化了项目依赖项的安装和更新，这些依赖项是库，例如：jQuery, Bootstrap 等 - 在您的网站上使用但不是由您编写的所有内容。
浏览所有图书馆网站，下载和解压档案，将文件复制到项目中——所有这些都被终端中的一些命令所取代。
它代表：Node JS package manager 帮助您管理您的软件所依赖的所有库。您可以在一个名为package.json 的文件中定义您的需求，然后在命令行中运行npm install……然后BANG，您的包已下载并可以使用。它可以用于front-end 和back-end 库。
对于前端包管理，概念与 NPM 相同。您所有的库都存储在一个名为bower.json 的文件中，然后在命令行中运行bower install。
Bower 被推荐给他们的用户migrate over to npm or yarn。请注意
Bower 和 NPM 之间的区别
Bower 和 NPM 最大的区别在于 NPM 是嵌套的
依赖树，而 Bower 需要一个扁平的依赖树，如下所示。
引用What is the difference between Bower and 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 published 提供了一个新的包管理器，与NPM 相比具有更多优势。使用 Yarn，您仍然可以同时使用 NPM 和 Bower 注册表来获取包。如果您之前安装过一个包，yarn 会创建一个缓存副本，以方便offline package installs。
JSPM 是SystemJS 通用模块加载器的包管理器，构建在动态ES6 模块加载器之上。它不是一个拥有自己一套规则的全新包管理器，而是在现有包源之上工作。开箱即用，它适用于GitHub 和npm。由于大多数基于Bower 的软件包都基于GitHub，我们也可以使用jspm 安装这些软件包。它有一个注册表，列出了大多数常用的前端包，以便于安装。
查看Bower 和jspm 之间的区别：
Package Manager: Bower 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
它是一个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 的更多信息，以便轻松了解。
Relation between CommonJS, AMD and 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>
它将您的所有静态资产（包括 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 模块加载器 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。
-
为了使这些脚本运行，我们需要在 HTML 页面上加载 system.js 和 config.js。之后，我们将使用加载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 与Webpack 一起使用，因为Angular 2 已经应用了它。由于 jspm 是为与 SystemJS 集成而开发的，并且它可以在现有的 npm 源之上运行，因此您的答案取决于您。
3。任务运行器
任务运行器和构建工具主要是命令行工具。为什么我们需要使用它们：一句话：自动化。在执行诸如缩小、编译、单元测试、linting等重复性任务时，您需要做的工作越少，而这些任务以前需要我们花费大量时间来使用命令行甚至手动完成。
您可以为您的开发环境创建自动化来预处理代码或使用配置文件创建构建脚本，处理复杂的任务似乎非常困难。近几年很流行。
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，但不是配置，你可以用流编写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 构建原型，然后手动创建一些文件夹，如 scss、css、img、字体。你可以只安装yeoman 并运行一个简单的脚本。那么这里的一切都是为了你。
查找更多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
我的答案与问题的内容不匹配，但是当我在谷歌上搜索这方面的知识时，我总是看到问题在最上面，所以我决定总结一下。希望对大家有所帮助。
如果您喜欢这篇文章，可以在我的博客trungk18.com 上阅读更多内容。感谢您的光临:)