（被标题骗进来的同学，这是一篇技术向的文章，为什么要起一个这么文艺但是不知道什么鬼的名字，当然是为了骗点击量啊，如果你至少想知道标题说的是什么，请看完第一章，然后再关掉页面，比心♥）
引言
现在前端越来越提倡一个概念，就是“工程化”，写前端代码不再仅仅是写一些html，贴上一堆CSS，加一些JavaScript（加上大量的jQuery牌药丸疗效更佳），我们看到，前端工程师正在成为一个正经严肃的职业（一直都很正经严肃的好嘛> v<！）。
团队在一些基础设施，包括Gitlab，Jenkins上协同工作，这些基础设施可以倒过来要求各个成员参考最佳实践的方式来工作。这是工程师文化的一部分。这篇文章的主题是，如何搭建本地的npm仓库，以便团队成员使用npm模块化方式来管理团队的codebase。我们将使用Sinopia来完成这个任务。
Sinopia是什么
Sinopia是一个开源的，可以免配置，快速的搭建本地的npm仓库的服务程序。首先大家会看到的是这个名字怪怪的，它的英文释义是：
锡诺普亚
“锡诺普亚”（sinopia）或是“锡诺普尔”（sinoper）是红赭的代名词。最早来到北美的白人殖民者称土著居民为“红印第安人”，因为他们会使用红赭将自己的脸庞和身体，还有弓箭，长矛等武器涂成红色。
所以Sinopia在我们心目中是一个活泼可爱的印第安少女的形象，例如这样子的：
一个大写的可爱的sinopia娘
为什么在一篇技术向的文章里要花时间来考究一个名字的来源呢？这当然是为了情（zhuang）怀(bi)。
在Windows 10下安装Sinopia
我们不需要在自己的开发机器上部署Sinopia服务，而是部署在团队公开的机器上。
Sinopia是基于Node.js的，但是依赖于native构建环境，在Windows 10下安装Sinopia会遇到相关错误。对于这种Mac-First或者Linux-First的工具，Windows 10的兼容性是一个问题。不过Microsoft The Empier这个名字是随便叫的嘛？
在Windows 10中提供了被称之为 WSL的组件，可以提供一个全功能的bash环境，事实上就是一个Unbuntu的镜像，我们可以用来作为Mac-First或者Linux-First的命令行工具的容器，相对于使用虚拟机的做法，更加方便可得。教程参考： Bash on Unbuntu on Windows
image.png
然后我们按照如下顺序执行命令，本地的sinopia服务就运行起来了：
//安装node.js和npm
$ sudo apt-get install nodejs npm /
//安装sinopia
$ sudo npm install -g sinopia
//由于linux发行版的node.js的命令是nodejs而不是node，需要创建一个软链接兼容
$ sudo ln -s "$(which nodejs)" /usr/local/bin/node
//启动sinopia服务
$ sinopia
在浏览器中打开localhost:4873可以看到本地npm仓库的管理页面。
image.png
项目的readme还会做这样的设置：
# npm configuration
$ npm set registry http://localhost:4873/
# if you use HTTPS, add an appropriate CA information
# ("null" means get CA list from OS)
$ npm set ca nul
但是请不要这么做。
因为这样会设置npm全局使用本地npm仓库，如果不是在团队的开发环境下，npm将无法访问到该仓库，如果我们开发个人项目就会产生问题。建议的方式是在项目中添加.npmrc文件。
registry = "http://localhost:4873/"
ca = null
【更新】推荐使用nrm工具来管理不同项目的registry。
使用ES2015开发npm模块
ES2015足够成熟，兼容性也没有问题，所以推荐作为团队的语言规范，包括 import/export，class, lambda 和 Promise 这些特性。
不要问我为什么不用ES2017
image.png
好吧，因为ES2015其实是ES6，而ES5是2009年发布的，也就是说ES2015是一个憋了6年的大招，之后可能大家觉得这样下去太慢了，就改成一年一更了。所以ES2015就是一个熟男款的欧巴，而ES2016， ES2017不过是小鲜肉。
参考阅读：
原文中提到的直接调试源代码，而不是编译后的代码的问题，可以在Visual Studio Code中修改launch.json文件，参考我的配置：
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/index.js",
"runtimeExecutable": "C:\\Users\\WEI\\AppData\\Roaming\\npm\\babel-node.cmd",
"protocol": "inspector"
}
]
}
网友评论