es6零基础学习之项目目录创建

Posted 2020-10-10 share水边

和大家分享一下在学习es6的过程中所积累的东西，也希望更多的朋友能够互相学习

首先创建项目目录

打开你的命令行，什么文件下都可以，大家请随意，我自己用的git，输入 mkdir es6

　　

创建一个完整的项目要有服务器，要有完成的借口提供我们数据，还要构建前端代码的编译和数据的刷新，所以我们要创建三个并行的模块

第一：创建app，放置前端代码        输入mkdir app

第二：创建服务器        输入mkdir server

第三：创建构建工具         输入mkdir tasks

创建好对应的目录，那么对应目录下的文件和文件夹也要一一创建好

aap目录下要包含css文件，js文件和模板目录放置html文件     要先进入app目录      输入cd app/

　输入mkdir css

   输入mkdir js

   输入mkdir views

es6的规则比较严谨，对类的把握比较严格，比如js下就要分为类进行，那么我们就要在相应的文件夹下继续创建

   输入mkdir js/class

空的目录是没有任何作用的，接下来我们要初始化几个文件

首先：先创建一个空的类文件        输入touch js/class/test.js

其次：初始化一个入口文件        输入touch js/index.js

css目前暂时先不创建，因为这对我们的总体是不影响的

接下里我们要再创建两个模板文件（为啥是ejs而不是html，因为在通过接下来的实例中，我所用的数据信息，通过的服务器代码expess   node.js来做的，他的模板引擎就是ejs，为了方便大家也可以直接就理解为html）

第一：错误的模板   输入touch views/error.ejs

第二：入口的模板    输入touch views/index.ejs

直到此处app里面的创建算是基本完成，那么接下来我们要进入server目录来创建         输入cd ../server/

server目录

在创建server文件时我们要借用express脚手架，而使用这个脚手架的前提下要先安装node.js，这个应该都难不倒大家（安装好的，我们进行下一步）

直接运行express脚手架     输入express -e .（含义：express 启动脚手架 -e就是使用ejs这个模板引擎 . 表示在当前目录执行）

输入npm install，安装好后，接下来回到我们的构建工具目录  输入 cd../tasks/

tasks构建工具目录 

这个目录下我们要创建很多文件的js，文件的合并，脚本的编译和模板的自动更新等等   其中有一个是需要输入命令行参数的，我们输入命令行工具，他要对其做解析，那我们就先来创建

创建一个util，放置一些常见的脚本        输入 mkdir util

初始化文件一个文件        输入touch util/args.js

到此我们的目录基本创建了一些和一些初始文件，那么在我们根目录文件下我们还要创建哪些文件才算是将我们呢的es6的目录创建完成呢？我们先回到我们的根目录下

输入 cd../

第一：项目要安装依赖包，必须要有一个package.json     我们可以自动创建    输入npm init    会出现让你输入项目的名称，点回车，项目的版本号(可以自己输入的)，剩下的不想写就不用写的，            直接一路回车就可以了，最后输入y，同意。这就已经创建好了package.json，有了这个文件，我们就可以通过npm install创建我们想要的npm依赖包

第二：设置babel编译工具的配置文件  输入touch .babelrc（这里要注意了，这个文件时不能随便起名字的，babel编译时会自动去找这个文件，如果找不到，他就没法找到配置，所以名称是固定           的）

第三：gulp配置文件（我们整个项目的构建工具是使用的gulp工具做编译的）输入 touch gulpfile.babel.js（官网上回要求我们创建一个gulpfile.js，而我们接下来的项目是运行在es6环境之下，如            果不加babel，那么在运行的时候会报错，这个名称是固定的）

总结：这就是我们整个项目的es6的整个目录的创建和初始文件的创建，接下来就是我们正式的进行编码的过程，请继续关注我的后续博客的更新