Build a basic ES6 project

Watch the ES6 learning video online to learn how to create a basic ES6 project, including directory structure, automatic build and server setup Record it, for future reference to

I use git, Windows cmd can also be used, but some commands are different, such as viewing all files in the current directory cmd inside is dir Not ls, like creating a file in cmd is cd .>text.js instead of touch text.js etc., or Linux The order is convenient to use

一, create the project root directory

eg:ES6, after the creation is completed, enter the root directory

这里写图片描述

2, create three templates (folders) in parallel in the root directory.

这里写图片描述

app: Place front-end code, eg:css,js, some templates, etc. Server: put the server code Tasks: Place the script file for the build task

三, operate

1 in the app folder, create css, js, views three folders Css folder: used to place css code Js folder: used to place js files, here you need to pay attention to, in js because of the concept of a class, so you need to create a class folder in the js folder to store class files Views: template folder, used to save html files

这里写图片描述

2, initialize several files An empty directory has no effect, so create a few new files to initialize

A and create an empty class file in the class directory eg:test.js B, initialize an entry file in the js directory eg:index.js

这里写图片描述

C, initialize two template files in the views directory One is the error template file error.ejs One is the entry template file index.ejs

这里写图片描述

The above view is the html file, why is this ejs file? As will be mentioned below, here is when it is an html file

四, install the server code

A in the server directory, in the installation process, because you want to use the express scaffold, so you must first install express Scaffolding, express scaffolding is installed by the nodejs tool. The installation and installation of the vue-cli scaffold is the same as

这里写图片描述

because the command tool is separated in the express 4.x version, so you need to install a command tool. After executing the command npm install -g express-generator

这里写图片描述

B, after the installation is complete, enter the command express -e . in the server directory to directly use the express scaffolding

这里写图片描述

to explain: Express: Start command for scaffolding -e: Use the ejs template engine, which uses ejs as a template, which is why the files created in the previous views folder are suffixed with ejs. .: means to execute

in the current directory using the npm install to install the related dependencies

这里写图片描述

五, in the build directory views

in this directory, Need to create the task js, such as file merge, script compilation, template automatic update, etc.

Create a util directory in the views directory, used to place some common scripts

这里写图片描述

script files have many, such as Here args.js, when you need to use other files later, add

六, operate

A in the directory, create a file named package.json In order to install the dependency package (npm package), you must have a package.json file

. This file can be created manually or automatically by the command npm init Enter the line, later want to modify directly to find this file can be modified)

This is automatically generated

这里写图片描述

With this file, you can use the npm install Install the npm dependency package you want to use

B, create a configuration file for setting the babel compilation tool .babelrc

这里写图片描述

Note: The file name here can only be this .babelrc, can't be Other file names, because when compiling in babel, it will automatically find a file named .babelrc, if you can't find it, you can't read the configuration

C, because The whole project is built using gulp, so create gulp's configuration file gulpfile.babel.js (which can only be this file name)

这里写图片描述

官网 says to create a file called gulpfile.js File, why is there a more babel here, because the build script that was written after my project is using the ES6 syntax. If you do not add babel, when you execute the gulp script, you will get an error

, and the basic situation of the build directory of the entire project has been created.