主要用的是commonJS+webpack来实现一个商城前端，由于是后端入门，因此有必要先对用到的东西给进行简单的介绍。

1.git仓库

这一块就比较简单了，对于git的安装以及ssh key的配置就不再赘述了，只说明一下比较重要的几个命令。在github上创建好对应的项目之后，比如我这里的：https://github.com/sunweiguo/mmall-front-study

第一步：git clone https://github.com/sunweiguo/mmall-front-study.git

这样，就拉到本地了。下面就可以在本地开发，先不说提交的事情，先说一说另一种情况。

比如我一开始本地自己新建一个文件夹叫做：mmall-front=study，在里面我新建一个文件叫做test.html。此时我想把这个目录下的文件也放到git仓库中如何做呢？

第一步git初始化这个目录：git init

第二步就是将本地这个目录与远程仓库对应上：git remote add origin https://github.com/sunweiguo/mmall-front-study.git

第三步是从远程的master分支拉取代码下来：git pull origin master

下面就是提交目录下面的东西了，步骤都是一样的：

第一步：git add .

第二步：git commit -am 'xxx'

第三步：git push (--set-upstram origin master)

这样就提交远程仓库成功了。

如果要切换分支，假设这个分支还不存在：git checkout -b m_v1.0，解释一下，checkout表示切换分支，-b表示这个分支还不存在，需要新建。

查看分支：git b.

2.项目目录

1
2
3
4
5
6
src
└─── view
└─── page
└─── service
└─── util
└─── image

3.commonJS

CommonJS是服务器端模块的规范，Node.js采用了这个规范。

根据CommonJS规范，一个单独的文件就是一个模块。

加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。

1
2
3
// addition.js

exports.do = function(a, b){ return a + b };

上面的语句定义了一个加法模块，做法就是在exports对象上定义一个do方法，那就是供外部调用的方法。使用的时候，只要用require函数调用即可。

1
2
3
4
var add = require('./addition');

add.do(1,2)
// 3

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。

4.webpack

感觉这一篇文章写的不错：前端工程化——Webpack入门使用。

简单来说，就是一切都可以当成模块，require引入，不是js的通过loader解释一下，然后打包到一个js文件，html页面在script引入它。

5.nodejs&npm

构建工具webpack依赖于nodejs环境，nodejs是一个基于谷歌的V8引擎的javascript运行环境，用的是一个事件驱动的、非阻塞的IO模型，适用于低运算高IO的场景，比如聊天室。

而NPM是什么呢？它其实一个资源库，拥有世界上最大的开源库，因此你想要用什么库基本都能找到。因此应用比较广泛。

6.fiddler

是一个抓包工具，也可以用作代理工具。代理是什么？就是中间多了一个代理商，帮助我们处理请求：

image

代理工具有什么用呢？比如我这里的mmall这个项目，本地开发都是localhost:8080去请求前端的资源，但是如果此时后端接口假如是api.mmall.com，那么就会产生跨域问题，此时，我们访问前端资源还用localhost这个域名，但是当访问后端接口的时候，就可以对这个localhost进行劫持，将其改为api.mmall.com，这样完美解决了开发环境中跨域问题。

7.项目初始化

首先在准备好上面工作之后，其实也没啥，就是git处理完成之后，在项目目录下执行npm init，会提示你输入一些信息，都是无关紧要的东西，比如我的：

我的环境都是在windows下，我的nodejs版本是8.11.1,出问题后面再改。npm版本是5.6.0。webpack版本是1.15.0。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (mmall-front-study)
version: (1.0.0)
description: mmall前端
entry point: (index.js)
test command:
git repository: (https://github.com/sunweiguo/mmall-front-study.git)
keywords:
author: fossi
license: (ISC)
About to write to F:\git-code\mmall-front-study\package.json:

{
  "name": "mmall-front-study",
  "version": "1.0.0",
  "description": "mmall前端",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sunweiguo/mmall-front-study.git"
  },
  "author": "fossi",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/sunweiguo/mmall-front-study/issues"
  },
  "homepage": "https://github.com/sunweiguo/mmall-front-study#readme"
}


Is this ok? (yes) yes

全局安装webpack：npm install -g webpack@^1.15.0。

我们可以试一下demo:

比如比较简单的情况，就是单一的文件。比如一个入口文件index.js：

1
2
cats = require('./cats.js');
console.log(cats);

这里引用的cats.js:

1
2
var cats = ['dace','henry','martha'];
module.exports = cats;

此时，我们可以用命令行规定一个入口文件以及输出文件即可：

1
webpack ./src/page/index/index.js ./dist/app.js

顺利的话就会看到生成一个dist文件夹，里面有一个app.js文件，但是这种方式比较简单，不能增加一些其他高级的东西，因此推荐下一种方式。

我们设置一个配置文件叫做：webpack.config.js文件作为打包的入口文件。里面的内容为：

1
2
3
4
5
6
7
module.exports = {
	entry: './src/page/index/index.js',
	output: {
		path: './dist',
		filename: 'app.js'
	}
};

命令行直接输入webpack即可。入门的使用到此结束。