斯人如彩虹，遇上方知有

前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。

1. nrm: npm registry 管理器

registry: npm 远程仓库的地址。

由于众所周知的原因，npm 官方仓库在国内特别的慢，所以我们需要用一些替代性方案，一种方案就是切换 npm registry 到国内的镜像仓库。

所以，一般我们会这样做：

1
2

# 切换到淘宝 npm 仓库
npm config set registry https://registry.npm.taobao.org/

但是这样做会比较麻烦，因为切换的时候得记住 registry 的 url 地址。所以就需要 nrm 来管理 npm registry。

对于前端开发来说，组件化技术已经是一门必修课了，这其中又主要以 react 和 vue 为主。但平时在开发组件，尤其是公共组件或者第三方组件库的时候，往往会有一些困扰：

• 不能很好的管理多个组件，尤其是在组件预览的时候，不能一目了然
• 在组件预览的时候，也不能很好的反应一个组件的多个不同状态
• 自动化交互测试可以使用 enzyme，但很多时候还得手动测试，就比较麻烦了
• 在写文档的时候，需要将组件预览和文档写在一起，并需要切换到不同的状态，就比较吃力了

所以，storybook 就是为了解决这些问题而出现的，它为你的组件搭建了一个强大的开发环境，主要提供了以下的几个功能：

webpack 对前端来说是再熟悉不过的工具了，它提供了强大的功能来构建前端的资源，包括 html/js/ts/css/less/scss ... 等语言脚本，也包括 images/fonts ... 等二进制文件。

其实，webpack 发起之初主要是为了解决以下两个问题：

1. 代码拆分（Code Splitting）: 可以将应用程序分解成可管理的代码块，可以按需加载，这样用户便可快速与应用交互，而不必等到整个应用程序下载和解析完成才能使用，以此构建复杂的单页应用程序（SPA）；
2. 静态资源（Static Assets）: 可以将所有的静态资源，如 js、css、图片、字体等，导入到应用程序中，然后由 webpack 使用 hash 重命名需要的资源文件，而无需为文件 URL 增添 hash 而使用 hack 脚本，并且一个资源还能依赖其他资源。

正是因为 webpack 拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码（如果你有查看过 webpack 的 bundle 文件，便会发现）。

尽管写了多年的代码，但是始终有一件事不敢确定，就是自己的代码究竟写得好不好？这个问题很难有确切的答案，因为这个跟风格、规范有很大关系，而风格、规范很难说好还是不好。

但我觉得好的代码，一定是能让别人阅读起来有一种爽心悦目的感觉。

写在前面

没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，我想应该挺难的，就小声说了没有，然后就让我回去了o(╯□╰)o。

其实，在现在的我看来，npm包就是一个我们平时经常写的一个export出来的模块而已，只不过跟其它业务代码耦合性低，具有较高的独立性。

当然，要发布一个npm包，除了写的模块组件外，还需要做一些基础的包装工作。下面我就以最近开发的「DigitalKeyboard 数字键盘 NPM」 为例，一一列出具体步骤：

前端组件化是这几年老生常谈的话题，笔者就不在这里对前端组件化思想的发展史、优劣做详细的介绍。在开发中我们经常会遇到，从初期的小项目，到后期的项目功能迭代，功能模块越来越多，项目越来越大。组件化规范制定不够完善，多人团队协作开发组件耦合度高、复用性低、代码冗余严重，导致项目维护成本越来越高。在此写下笔者自己处理上述问题的思考。

一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用 create-react-app、vue-cli、yeoman 等命令行工具，也可以直接用 html5-boilerplate、react-boilerplate、hackathon-starter 等模板，如果这些都不能满足你的个性化需求，可以尝试搭建自己的前端脚手架。

一般来说，脚手架包括目录结构定义、必要的项目配置文件与工具配置文件、工具与命令。

一个基本的脚手架：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

|-- /                              项目根目录
    |-- src/                       源代码目录
    |-- package.json               npm 项目文件
    |-- README.md                  项目说明文件
    |-- CHANGELOG.md               版本更新记录
    |-- .gitignore                 git 忽略配置文件
    |-- .editorconfig              编辑器配置文件
    |-- .npmrc                     npm 配置文件
    |-- .npmignore                 npm 忽略配置文件
    |-- .eslintrc                  eslint 配置文件
    |-- .eslintignore              eslint 忽略配置文件
    |-- .stylelintrc               stylelint 配置文件
    |-- .stylelintignore           stylelint 忽略配置文件
    |-- .prettierrc                prettier 配置文件
    |-- .prettierignore            prettier 忽略配置文件

    |-- .babelrc                   babel 配置文件
    |-- webpack.config.js          webpack 配置文件
    |-- rollup.config.js           rollup 配置文件
    |-- gulpfile.js                gulp 配置文件

MAC

MAC可以使用第三方包管理器 HomeBrew

1

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

开始安装git

1

brew install git

Linux 可以用自带的yum

1

yum install git

window
下载地址

敲黑板：文档中命令行未备注则默认是linux系统

1. 为什么需要 “前后端分离、web 与 static 服务器分离”

web 前端的发展历史大致可以分为两个阶段：node 之前与 node 之后。在 nodejs 出现之前，前端的发展一直比较缓慢，主要是因为：