使用express应用生成器搭建项目

1. 使用一下命令安装生成器

   $ npm install express-generator -g

2. 使用-h 查看命令选项

   $ express -h  Usage: express [options][dir]  Options:    -h, --help          output usage information        --version       output the version number    -e, --ejs           add ejs engine support        --hbs           add handlebars engine support        --pug           add pug engine support    -H, --hogan         add hogan.js engine support    -v, --view 
         
           add view 
          
            support (ejs|hbs|hjs|jade|pug|twig|            vash) (defaults to jade)    -c, --css 
           
              add stylesheet 
            
              support (less|stylus|compass|            sass) (defaults to plain css)        --git           add .gitignore    -f, --force         force on non-empty directory
            
           
          
         

3. 创建名为node-sticky的express应用程序

   $ express --pug --css=less node-sticky//我默认安装了less和pug模板引擎

4. 安装依赖

   $ cd node-sticky$ npm install

5. 启动应用程序

   $ npm start> node-sticky@0.0.0 start /node-sticky> node ./bin/www

6. 在浏览器输入localhost:3000 就可以看到欢迎画面了。

7. 目前的目录结构

   ├── app.js├── bin│   └── www├── package.json├── public│   ├── images│   ├── javascripts│   └── stylesheets│       └── style.css├── routes│   ├── index.js│   └── users.js└── views    ├── error.pug    ├── index.pug    └── layout.pug

添加src目录，配置相应的webpack

1. 我们把前端的源码放在src目录下，使用webpack打包到node的public目录下面。添加之后的目录结构为：

   ├── app.js├── bin|  └── www├── package-lock.json├── package.json├── public|  ├── images|  ├── javascripts|  └── stylesheets|     └── style.less├── routes|  ├── index.js|  └── users.js├── src                          //前端源码目录|  ├── js|  |  ├── app                    //webpack入口目录|  |  |  └── index.js|  |  ├── lib                        //一些工具目录|  |  |—— module             //js模块|  ├── less                            //less目录|  └── webpack.config.js    //webpack配置文件└── views   ├── error.pug   ├── index.pug   └── layout.pug

   我使用的mac的tree命令生成目录树，具体命令：

   tree -l 4 --ignore=node_modules，把依赖目录忽略。

2. 配置webpack

   1. 配置之前需要先安装一下webpack依赖

      $ npm install webpack --save-dev

   2. 然后简单配置webpack入口文件和出口文件。

      let webpack = require('webpack')let path = require('path')module.exports = {    entry: path.join(__dirname,'/js/app/index.js'),    output: {        path: path.join(__dirname,'../public'),        filename: 'js/index.js'    }}

   3. 在终端运行webpack

      $ cd src$ webpack

Version: webpack 4.3.0Time: 265msBuilt at: 2018-3-29 05:21:58      Asset       Size  Chunks             Chunk Namesjs/index.js  676 bytes       0  [emitted]  mainEntrypoint main = js/index.js   [0] ./js/module/b.js 36 bytes {0} [built]   [1] ./js/module/a.js 36 bytes {0} [built]   [2] ./js/app/index.js 65 bytes {0} [built]    WARNING in configuration    The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.    ~~~4. 最后给一个警告，要加上webpack运行的环境，在后面加上就好了    ~~~    $ webpack --mode development    ~~~

配置package.json的script脚本

1. 但是我们不能一直在src里面执行，我们要在根目录下执行，所有要使用package.json里面的srcipt字段脚本命令。需要配置webpack的--config指定脚本文件。

   //package.json{  "name": "node-sticky",  "version": "0.0.0",  "private": true,  "scripts": {    "start": "node ./bin/www",    "webpack": "webpack --config=src/webpack.config.js --mode=development"  },  "dependencies": {    "cookie-parser": "~1.4.3",    "debug": "~2.6.9",    "express": "~4.16.0",    "http-errors": "~1.6.2",    "less-middleware": "~2.2.1",    "morgan": "~1.9.0",    "pug": "2.0.0-beta11",    "webpack": "^4.3.0"  }}

2. 然后进入个目录执行npm run webpack就会发现报错了。

   $ cd ..$ npm run webpack                                                                                                            > node-sticky@0.0.0 webpack /Users/lanbo/projects/node-sticky> webpack --config=src/webpack.config.jsThe CLI moved into a separate package: webpack-cli.Please install 'webpack-cli' in addition to webpack itself to use the CLI.-> When using npm: npm install webpack-cli -D-> When using yarn: yarn add webpack-cli -Dnpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sticky@0.0.0 webpack: `webpack --config=src/webpack.config.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the node-sticky@0.0.0 webpack script.npm ERR! This is probably not a problem with npm. There is likely additional                 logging output above.npm ERR! A complete log of this run can be found in:npm ERR!     /Users/lanbo/.npm/_logs/2018-03-28T21_33_04_687Z-debug.log

3. 根据报错内容需要安装webpack-cli，那就照着做吧。

   $ npm install webpack-cli --save-dev

4. 然后再次执行，就发现成功啦，哈哈哈~~然后问题来了，不能每次都要自己手动去webpack，有一个工具能自动去打包就好了，正好有这个工具--onchange.

   $ npm install onchange --save-dev

5. 配置script脚本

   $ "watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"

6. 在另外开一个终端，启动脚本就不去管他了，js和less文件有变动会自动去打包。

   $ npm run watch

一点点记录，一步步成长，加油~~~~