- 从零搭建前端开发环境(零)——基础篇:1.npm、git及项目初始化
- 从零搭建前端开发环境(零)——基础篇:2.webpack生产与开发环境配置
- 从零搭建前端开发环境(零)——扩展篇:3.jest单测
- 从零搭建前端开发环境(零)——扩展篇:4.eslint统一代码规范
- 从零搭建前端开发环境(零)——终极篇:5.构建自己的前端脚手架
本文主要讲一些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,我就是用的头像。
3、提交git记录
现在我们的项目基础已经搭好了,可以提交第一个commit保存了。
$ git add .
$ git commit -m 'npm & git & project init'
注:commit时可能会提醒你注册用户和邮箱,只要按照提示,输入git config --global user.email "xxx@xxx.com"、git config --global user.name xxxx就可以了。
此时,git log看下,是否已经有一条记录了。如果有了,那么我们就立下了第一个里程碑了。如果没有,那么再看看Git教程吧。
如果我们想把本地的项目传到远程仓库上,比如github的话,只需要在github上建立一个空的仓库,然后用下面的命令关联即可。这一步并非必须,可以跳过。不过建议还是玩玩github,对于程序员来说,早晚都要接触的东西。
$ git remote add origin git@github.com: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