从零搭建前端开发环境（零）——基础篇：1.npm、git及项目初始化

本文主要讲一些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
*.sln

2、加入代码

为了以后省事，我们直接按照目前比较流行的目录结构来构建项目。

新建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，我就是用的头像。

扫描二维码关注公众号，回复： 3696571 查看本文章

3、提交git记录

现在我们的项目基础已经搭好了，可以提交第一个commit保存了。

$ git add .
$ git commit -m 'npm & git & project init'

注：commit时可能会提醒你注册用户和邮箱，只要按照提示，输入git config --global user.email "[email protected]"、git config --global user.name xxxx就可以了。

此时，git log看下，是否已经有一条记录了。如果有了，那么我们就立下了第一个里程碑了。如果没有，那么再看看Git教程吧。

如果我们想把本地的项目传到远程仓库上，比如github的话，只需要在github上建立一个空的仓库，然后用下面的命令关联即可。这一步并非必须，可以跳过。不过建议还是玩玩github，对于程序员来说，早晚都要接触的东西。

$ git remote add origin [email protected]:git_username/repository_name.git
$ git push -u origin master

4、配置展示

全部变化可看笔者的 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