环境搭建（记录）

本文将记录部分前端开发环境搭建过程，做记录使用，以便有需要时能及时查看。

1. Node.js 的使用

• 安装
  从官网下载安装包。
  安装了之后，
  千万别点击 Node.js 的图标（别问）。
• 配置
  打开 Git Bash，依次输入以下命令，按回车：

npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false

npm 的配置被存储在 ~/.npmrc，你可以随时改。

• 使用

npm 安装命令行小工具：
（1）装了 Node.js 之后就可以在 Git Bash 里面使用 node 和 npm 这两个命令了：

which node
which npm
node -v
npm -v

（2）安装翻译小字典：
运行

npm i -g fanyi 

即可安装 fanyi，安装完成之后，输入 fanyi frontend 就可以看到对应的中文释义。

• 关于更新
  因我使用的是Windows系统，所以只需要去官网上重新下载LTS版，并安装在原安装目录下，就可以成功更新了。（npm也会一起更新）

2. Git Bash

• 安装
  需要注意的步骤如下，其他就点 next 吧。
  

  Git1.jpg
  Git2.jpg
  Git3.jpg
  Git4.jpg
  好了，安装完成。

• 配置
  安装成功之后，需要设置一下外观：
  

  GitLook1.jpg
  GitLook2.jpg
  GitLook3.jpg
  GitLook4.jpg
  GitLook5.png
  关闭重启 Git Bash 即可。
  不要忘了配置SSH key 和执行五行Git 命令哦~

3. 自动化测试（配合Parcel）

3.1 使用 Karma + Mocha做单元测试

• Karma（[ˈkɑrmə]卡玛）是一个测试运行器，它可以呼起浏览器，加载测试脚本，然后运行测试用例
• Mocha（[ˈmoʊkə] 摩卡）是一个单元测试框架/库，它可以用来写测试用例
• Sinon（西农）是一个 spy / stub / mock 库，用以辅助测试

安装各种工具

npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

创建 karma 配置

// 新建 karma.conf.js

创建测试文件

创建测试脚本

在 package.json 里面找到 scripts 并改写 scripts

 "scripts": {
     "dev-test": "parcel watch test/* --no-cache & karma start",
     "test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
 },

运行测试脚本

要么使用 npm run test 一次性运行，要么使用 npm run dev-test 进行 watch 运行

过程中如果出现错误，可以尝试运行：rm -rf .cache dist

3.2 Travis CI 持续集成服务

它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。

持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。确保符合预期以后，再将新代码"集成"到主干。

首先，访问官方网站 travis-ci.org，使用 Github 账户注册并登入 Travis CI。
点右边的 + 号，选要自动测试的项目，勾选开关即可。

另外，在项目中需要创建：
touch .travis.yml，需要写入一些内容。

3.3 发布 npm 包

1 确保你的代码测试通过了

npm run test 全部是绿色才行。

2 上传代码到 npmjs.org

1. 更新 package.json
   1. 在 package.json 里将版本号改为 0.0.1，等做完了再改成 1.0.0
   2. 创建 index.js，在 index.js 里将你想要导出的内容全部导出
2. 去 https://www.npmjs.com/ 注册一个账户
3. 确认一下邮箱（必须）
4. 在 项目根目录运行 npm adduser
   • 如果错误提示里面含有 https://registry.npm.taobao.org 则说明你的 npm 源目前为淘宝源，需要更换为 npm 官方源
5. 运行 npm publish