构建一个基本的ES6项目（一）---项目目录的创建

梦里梦外; 2022-05-12 09:10 324阅读 0赞

在网上观看ES6的学习视频，了解如何创建一个基础的ES6工程，包括目录结构，自动构建与服务器的搭建  
记录一下，供以后自己参考

我使用的git，Windows的cmd也能用，但是有一些命令不一样，如查看当前目录下的所有文件cmd里面是`dir` 而不是`ls` ，又如创建一个文件 在cmd里面是`cd .>text.js` 而不是`touch text.js` 等等，还是Linux的命令用起来方便些

## 一、创建项目根目录 ##

eg：ES6 ，创建完成后进入根目录

![这里写图片描述][20180916165628658]

## 二、在根目录中创建并行的三个模板（文件夹） ##

![这里写图片描述][20180916165837326]

app：放置前端代码，eg：css，js，一些模板等  
server：放置服务器代码  
tasks：放置构建任务的脚本文件

## 三、在app文件夹下操作 ##

1、创建css，js，views三个文件夹  
css文件夹：用来放置css代码  
js文件夹：用来放置js文件，这里需要注意的是，在js中因为有类的概念，所以需要在js文件夹下再创建一个class文件夹来存放类文件  
views：模板文件夹，用来存html文件

![这里写图片描述][20180916171011232]

2、初始化几个文件  
空的目录是没有任何作用的，所以要新建几个文件来初始化

A、在class目录下创建一个空的类文件 eg：test.js  
B、在js目录下初始化一个入口文件 eg：index.js

![这里写图片描述][2018091617224960]

C、在views目录下初始化两个模板文件  
一个是错误模板文件 error.ejs  
一个是入口模板文件 index.ejs

![这里写图片描述][2018091617244586]

上面说views存的是html文件，为什么这里是ejs文件？下面会说到，这里就当它是html文件就行了

## 四、在server目录下安装服务器代码 ##

A、在安装过程中，因为要用到express脚手架，所以要先安装express脚手架，express脚手架是通过nodejs工具来安装的，这里的安装和安装vue-cli脚手架一样

![这里写图片描述][20180916173326343]

因为在express 4.x版本中是将命令工具分出来了，所以需要再安装一个命令工具，执行命令`npm install -g express-generator`

![这里写图片描述][20180916173413933]

查看输入命令`express --version`

B、安装完成后，在server目录下输入命令`express -e .` 来直接使用express脚手架

![这里写图片描述][20180916173547723]

解释：  
express：脚手架的启动命令  
\-e：使用ejs模板引擎，即使用ejs作为模板，这也就是为什么前面views文件夹里创建的文件以ejs为后缀的原因  
.：表示在当前目录下执行

使用命令`npm install` 来按装相关的依赖

![这里写图片描述][20180916174253529]

## 五、在构建目录views中操作 ##

在这个目录中，需要创建任务的js，如文件的合并、脚本的编译、模板的自动更新等

在views目录下创建一个util目录，用来放置一些常见的脚本

![这里写图片描述][20180916174653591]

脚本文件有很多，如这里的args.js，后续需要用到其它的文件的时候再去添加

## 六、在跟目录下操作 ##

A、创建一个名为package.json文件  
项目要安装依赖包（npm包）的过程中，就必须要有一个package.json文件

这个文件可以手动创建，也可以通过命令`npm init` 来自动生成（一路回车就行，后期想修改直接去找到这个文件就能进行修改）

这里是自动生成的

![这里写图片描述][20180916175910779]

有了这个文件后，就可以用`npm install` 命令来安装想要使用的npm依赖包了

B、创建一个设置babel编译工具的配置文件 `.babelrc`

![这里写图片描述][20180916181645667]

注意：这里的文件名只能是这个`.babelrc` ，不能是其它的文件名，因为在babel进行编译时，它会自动去找一个名为`.babelrc` 的文件，如果找不到，就没法读到配置

C、因为整个项目的构建是使用gulp来做编译的，所以要创建gulp的配置文件 gulpfile.babel.js（同样也只能是这个文件名）

![这里写图片描述][20180916181733224]

官网上说的是创建一个名为gulpfile.js文件，为什么这里会多一个babel，是因为在我的项目中之后写的构建脚本是用的ES6的语法，如果不加babel，在执行gulp脚本的时候会报错

截止到此，整个项目的构建目录的基本情况就已经完成创建了，完成后的项目目录结构如下  
![这里写图片描述][20180916185137486]

[20180916165628658]: /images/20220512/6693dcb48cc94b51aaf3b7bc08f54945.png
[20180916165837326]: /images/20220512/0781c718426045729dd48a3c88cfb39e.png
[20180916171011232]: /images/20220512/b22fceb7f1704698bd0d1145a4dd172c.png
[2018091617224960]: /images/20220512/49604d66166e4d95bd87335fb06c0f60.png
[2018091617244586]: /images/20220512/6ea3ff0d548a4b048707237aa4684d29.png
[20180916173326343]: /images/20220512/b6df5261792c485ba1ba59b624b16b4e.png
[20180916173413933]: /images/20220512/17ee42b3ecae4b45a88ec966a4ab5474.png
[20180916173547723]: /images/20220512/8fe4c33c94a44e7f86e1f841e652e6a1.png?
[20180916174253529]: /images/20220512/192a948fc6de4e0792d8828153955c45.png
[20180916174653591]: /images/20220512/52f4d4d799f840378e308ffd954e5879.png
[20180916175910779]: /images/20220512/dad1e8c2faab481887b7a16fbc4cebf2.png
[20180916181645667]: /images/20220512/576d44f165644d2d84a4b99974ac7f55.png
[20180916181733224]: /images/20220512/2cea123a3bfc4b07b2229b71b666335d.png
[20180916185137486]: /images/20220512/2810ec270c06472d8a46c9ed719a5fba.png