es6零基础学习之项目目录创建(一)
和大家分享一下在学习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的整个目录的创建和初始文件的创建,接下来就是我们正式的进行编码的过程,请继续关注我的后续博客的更新