Question

前端开发需要掌握的经验？

Answer 1

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

在此之前，如果你需要使用一些外部的库或者任何插件，你都需要手动下载相应的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也可以。