认识达内从这里开始

提高程序员的工作经验除了通过项目实际开发以外，只有平时的知识积累以及简单的程序开发测验等项目来提高了。今天，我们就一起来了解一下，在提高开发工程师操作经验的时候，都有哪些方面是需要掌握的。

在此之前，如果你需要使用一些外部的库或者任何插件，你都需要手动下载相应的JavaScript和CSS文件，然后把它们放进项目中。但是如果这些库或者插件发布新版本的话，你也得在项目中做出相应的更新，这样管理项目是非常麻烦的。包管理器帮助你解决了这个麻烦，它们可以帮助你自动地将外部库和插件引入到项目中，这样你就不必专门手动更新外部文件了。包管理器有yarn和npm，两者几乎相同，都只有安装的功能。你可以选择其中的任何一个，一旦学会使用其中的一个，另一个也就会了。

让我们学以致用

当你对包管理器有了基本的了解之后，就可以在你制作的网页中引入一些外部库。例如你可以安装一些Toast插件，当用户点击按钮的时候，用Toast插件向他们显示信息;或者你可以创建一个登陆表单，利用一些表单验证库来进行表单验证。可以学习如何使用不同的库，并了解如何安装不同的版本。

CSS预处理器

预处理器让CSS的功能更加丰富。CSS预处理器有Sass, Less, Stylus等等。如果让我选择的话，我喜欢Sass。近比较流行的CSS预处理器是PostCSS, 它的作用相当于CSS的解析器，了解它的使用也是很不错的。它可以单独使用，也可以配合Sass使用。我的建议是先学会Sass，后面如果你有时间的话可以再研究PostCSS.

CSS框架

你不需要再学习CSS框架，当然如果你想学习的话，也有很多选择。我喜欢的CSS框架是Bootstrap、Materialize和Bulma。但是结合现在的市场需求来说，我会选择Bootstrap。

CSS文件管理

随着项目的复杂程度增加，CSS也会开始变得混乱而无法维护。我们也有很多方式可以更好地构建CSS，以实现可伸缩性。例如OOCSS、SMACSS、SUITCSS、Atomic和BEM。你可以了解下它们之间的不同，我个人更喜欢BEM。

构建工具

构建工具可以帮助你构建、打包和开发JavaScript应用程序。这里包括校验工具、自动化构建工具及打包工具。

自动化构建工具有npm、gulp、grunt等。但是现在Webpack已经能够实现Gulp的很多功能，所以，现在通常都只使用npm来配合webpack完成任务自动化。你不必学习Gulp，当然以后如果你有时间的话，也可以了解一下，看看它是否适用于你的项目。

校验工具有ESLint、JSLint、JSHint和JSCS，但是目前大部分人都使用ESLint。

打包工具有Parcel、Webpack、Rollup、Browserify等等。如果必须选择一个的话，请毫不犹豫地选择Webpack。Rollup也很常用，但是建议将它用在库里面。在开发app的时候，请使用Webpack。所以，现在请开始自学Webpack，如果你愿意的话，了解一下Rollup也可以。

实践时间

恭喜你，你现在几乎已经可以自称为JavaScript开发者了!请继续用你学过的知识来开发一些东西吧。你可以创建一些Sass和JavaScript库。然后使用Webpack将Sass转换为CSS，然后用Babel转换ES6代码。完成后，你可以把代码上传到Github和npm上面。

选择一个框架

我之前将框架这一部分放在基础知识的后面，但是现在我把它放到了Sass、构建工具和包管理器的后面。因为框架要用到以上所有的知识，如果不先了解它们的话，可能根本看不懂框架。

框架也有很多选择，近流行的是React、Vue和Angular，而且React越来越火。但是，你选择它们中的任何一个都可以。对我个人来说，我更喜欢React和Angular。作为初学者，你可能会发现，相对来说，Angular会比较容易学，可能是因为它几乎支持所有常用的功能。例如支持懒加载的路由器、支持拦截器的HTTP客户端、依赖注入、CSS封装组件等等。有了它，你可以不用再引入其他库了。但是从社区的讨论来看，React更具优势，Facebook的团队也一直在努力改进它。不要因为更流行而跟风，多多了解比较，你肯定会发现哪种框架更适合你。

作者：Kamran Ahmed

译者：奚甜甜

来源：infoq

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!