本文主要講一些node、npm、git的一些基礎知識，因爲整個系列主要側重的是流程的梳理，並非詳細的教程，有的原理不會解釋的太詳細。但是我希望得到的效果是，按照整個流程走下來，能夠順利搭建起環境，如果哪一步缺少了什麼，歡迎留言。本文默認讀者已經裝了node(8.94+)、npm(5.7.1+)、git(2.7.4+)，編輯器用的vscode。
1、npm及git初始化
$ mkdir demo && cd demo
$ npm init -y
$ git init簡單說明一下，npm初始化會生成一個package.json文件，裏面記錄了整個項目的基本信息，非常重要，我們會一直用到它。-y的意思是默認每一項都選擇是，如果只有npm init 它會每一項都讓你做確認的。反正生成了還可以再改，用-y更省時間。
git基本上是工作當中的必備技能了，我們本地用一下，一是爲了熟悉命令，二是爲了能記錄每一個里程碑。不熟悉的話，推薦廖雪峯的Git教程。
通常我們都需要一個.gitignore文件，來過濾掉那些不需要加入倉庫的文件。因爲這個配置基本上都是固定的，所以我們一步到位，直接把東西全都加進來。
.gitignore
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/**/coverage/
/test/**/reports/
selenium-debug.log
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln2、加入代碼
爲了以後省事，我們直接按照目前比較流行的目錄結構來構建項目。
- 新建src目錄，放置index.js和index.css。
- 在src目錄下新建assets目錄，放置logo.jpg（隨便找一個小一點的圖片即可）。
- 根目錄下新建index.html文件。
index.html（關於模板初始化的知識詳見項目初始化——HTML模板）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
<link rel="stylesheet" href="./src/index.css">
</head>
<body>
<div id="app"></div>
<script src="./src/index.js"></script>
</body>
</html>src/index.js（這裏的js用了es6的語法，現代瀏覽器應該可以正常顯示，後面我們會引入babel，所以不用擔心兼容問題。而且爲了方便後續的內容，這裏面寫一些稍微複雜點的業務）
const $app = document.getElementById('app');
function strReverse(str) {
return str.split('').reverse().join('');
}
const strInput = 'Hello World';
const srtHolder = 'The result will be here...';
const strHtml = `
<img src="./src/assets/logo.jpg" alt="logo" />
<h1>${strInput}</h1>
<button id="do">Show the reverse of "${strInput}"</button>
<button id="reset">Do reset</button>
<p id="result">${srtHolder}</p>
`;
$app.innerHTML = strHtml;
const $result = document.getElementById('result');
document.getElementById('do').onclick = function () {
$result.innerHTML = `The reverse of "${strInput}" is "${strReverse(strInput)}"`;
};
document.getElementById('reset').onclick = function () {
$result.innerHTML = srtHolder;
}; src/index.css（這裏先寫一些簡單的樣式，關於css的知識詳見項目初始化——CSS-Reset）
body {
text-align: center;
}src/assets/logo.jpg
隨便搞個圖片做logo，我就是用的頭像。
3、提交git記錄
現在我們的項目基礎已經搭好了，可以提交第一個commit保存了。
$ git add .
$ git commit -m 'npm & git & project init'
此時，git log看下，是否已經有一條記錄了。如果有了，那麼我們就立下了第一個里程碑了。如果沒有，那麼再看看Git教程吧。
如果我們想把本地的項目傳到遠程倉庫上，比如github的話，只需要在github上建立一個空的倉庫，然後用下面的命令關聯即可。這一步並非必須，可以跳過。不過建議還是玩玩github，對於程序員來說，早晚都要接觸的東西。
$ git remote add origin [email protected]:git_username/repository_name.git
$ git push -u origin master4、配置展示
全部變化可看筆者的github記錄，還是很清晰的。package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}目錄結構
demo
|- src/
|- assets/
|- logo.jpg
|- index.css
|- index.js
|- .gitignore
|- index.html
|- package.json