JavaScript程序员，如何写出令人惊叹的高级代码
各种包管理器到ESLint，从CommonJS到AMD，再从ES6模块到Babel和Webpack，好多工具啊！
1. 好累……
是的，今天我觉得很疲劳。我不禁想，我本应该继续我的销售职业，不应该抄近路做前端开发。但我意识到，前端开发是给勇敢者准备的，而勇敢者绝不会放弃，他们才是人生赢家。
所以我决定做人生赢家，我要写点东西给前端开发和工具链疲劳的受害者们看。我要写一下我是怎样将初学者级别的代码变成令人赞叹的产品级代码的，以及这个过程中我用到的工具。
现在开始吧！
2. 我们在做的东西
其实没什么令人激动的东西。我们做了个Web应用，从某个API读取一些随机的用户，然后显示在前端上。它没有路由的能力。本文的最终目标是让你熟悉前端的工具链。
我们的AngularJS代码中没有使用样板代码，所以我们不会被CLI的那些黑科技搞得晕头转向。注意我用的是AngularJS，不是Angular。使用AngularJS的原因是我找不到任何关于AngularJS工具链和打包的文章。
首先在根目录下建一个index文件。
Random User!
Random User!
中规中矩的老式代码。这段代码从CDN上加载AngularJS文件和一个最小化的CSS框架，然后开始一点点编写JavaScript代码并添加到index中。
但随着应用程序的增长，我们有必要跟踪所有的依赖（这里的依赖就是Angular）。
3. 使用包管理器
许多人使用包管理器跟踪项目所需的依赖的版本。包管理器的最大卖点就是，它会访问依赖的GitHub主页，下载到你的文件夹里，并且跟踪下载的版本。这样可以保证，移动代码位置或者下载其他版本的依赖不会造成代码无法工作。
代码管理器有过duojs、jspm、bower、npm，现在还有Yarn。现在去装一个yarn，我们稍后会用到。
向应用程序里添加依赖时，yarn会下载所需的文件，并保存到node_modules文件夹中。之后，需要用到依赖时，可以在index文件里引入：
装好这个后，我们再往根目录下添加app.js、userController.js和userFactory.js文件，然后全都链接到index文件里。
/**
* /app.js
*/
var app = angular.module("RandomApp", []);
// /userFactory.js
app.factory("UserF", function($http) {
var UserF = {};
UserF.getUsers = function(){
return $http({
method: 'GET',
url: 'https://www.reqres.in/api/users',
})
};
return UserF;
});
// /userController.js
app.controller("userController", function($scope, UserF){
$scope.users = [];
UserF.getUsers()
.then(function(res) {
$scope.users = res.data.data;
})
});
Random User!
Random User!