(一)1.ES6学习大纲及构建工具(可忽略)19-08-05

WechatIMG69.png

备注：理论概念部分“作用域”后期整理

一.ES6项目构建

1.基础架构

WechatIMG70.png

2.任务自动化gulp

• 任务自动化：就是尽量减少人工操作，尽量让机器自动去监听你所有的操作，然后他自动去相应。
• gulp:解决自动化，增强自动化流程的一个工具。提供了很多的插件。
• 了解gulp完成任务自动化，先到gulp中文网去看下文档。

3.编译工具（babel、webpack）

4.代码实现

• 在终端创建前端代码目录

LYKdeMacBook-Pro:~ hm$ mkdir es6  //创建根目录的名称
LYKdeMacBook-Pro:~ hm$ cd es6/ 
LYKdeMacBook-Pro:es6 hm$ mkdir app   //创建app目录，放置前端代码
LYKdeMacBook-Pro:es6 hm$ mkdir server   //创建服务器目录
LYKdeMacBook-Pro:es6 hm$ mkdir tasks  //创建构建工具的目录
LYKdeMacBook-Pro:es6 hm$ cd app/   //
LYKdeMacBook-Pro:app hm$ mkdir css //创建放置CSS的目录
LYKdeMacBook-Pro:app hm$ mkdir js //创建放置js的目录
LYKdeMacBook-Pro:app hm$ mkdir views //创建模板目录 放HTML的目录
LYKdeMacBook-Pro:app hm$ ls
css js  views
LYKdeMacBook-Pro:app hm$ mkdir js/class  //在js创建类的目录
LYKdeMacBook-Pro:app hm$ touch js/class/test.js  //初始化一个文件
LYKdeMacBook-Pro:app hm$ touch js/index.js //初始话一个入口文件
LYKdeMacBook-Pro:app hm$ touch views/error.ejs  //初始化一个错误文件模板
LYKdeMacBook-Pro:app hm$ LYKdeMacBook-Pro:app hm$ touch views/index.ejs  //初始化一个入口模板
LYKdeMacBook-Pro:app hm$ clear 清除
//然后进入server目录下

下载安装node.js https://nodejs.org/zh-cn/download/

LYKdeMacBook-Pro:app hm$ cd ../server/
LYKdeMacBook-Pro:server hm$ npm install -g express-generator 
LYKdeMacBook-Pro:server hm$ npm install -g express 
LYKdeMacBook-Pro:server hm$ express -e .
//安装脚手架
//express脚手架的启动命令
//-e我要使用一级s模板引擎引擎
// .表示在一级目录执行
LYKdeMacBook-Pro:server hm$ npm install
LYKdeMacBook-Pro:server hm$ clear

LYKdeMacBook-Pro:server hm$ cd ../tasks/  //到构建工具目录
LYKdeMacBook-Pro:tasks hm$ mkdir util  //创建一个放置常见脚本的util目录
LYKdeMacBook-Pro:tasks hm$ touch util/args.js
LYKdeMacBook-Pro:tasks hm$ clear

LYKdeMacBook-Pro:tasks hm$ cd ../
LYKdeMacBook-Pro:es6 hm$ ls
app server  tasks
LYKdeMacBook-Pro:es6 hm$ 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: (es6) 
version: (1.0.0) 1.0.1
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords:    
author: 
license: (ISC) 
About to write to /Users/hm/es6/package.json:

{
  "name": "es6",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
Is this OK? (yes) y
LYKdeMacBook-Pro:es6 hm$ clear

//创建设置babel编译工具的配置文件
LYKdeMacBook-Pro:es6 hm$ touch .babelrc
LYKdeMacBook-Pro:es6 hm$ touch gulpfile.babel.js   //使用es6要使用创建gulpfile.babel.js ，只创建gulpfile会报错的
LYKdeMacBook-Pro:es6 hm$ clear

环境工具构建结束。