express项目总结 express项目总结

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

使用一下命令安装生成器

$ npm install express-generator -g

使用-h 查看命令选项

$ express -hUsage: express [options][dir]Options:-h, --helpoutput usage information --versionoutput the version number -e, --ejsadd ejs engine support --hbsadd handlebars engine support --pugadd pug engine support -H, --hoganadd 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) --gitadd .gitignore -f, --forceforce on non-empty directory

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

$ express -f -e//安装了ejs模板引擎

安装依赖

$ cd node-sticky $ npm install

启动应用程序

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

在浏览器输入localhost:3000 就可以看到欢迎画面了
目前的目录结构

├── app.js ├── bin │└── www ├── package.json ├── public │├── images │├── javascripts │└── stylesheets │└── style.css ├── routes │├── index.js │└── users.js └── views ├── error.ejs └── index.ejs //tree是在mac中才有Windows意会就好

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

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

├── app.js ├── bin |└── www ├── package-lock.json ├── package.json ├── public//打包后代码放置处 |├── fonts//放字体自行添加 |├── images |├── javascripts |└── stylesheets |└── style.less ├── routes |├── index.js |└── users.js ├── src//前端源码目录 |├── js ||├── app//webpack入口目录 |||└── index.js ||├── lib//一些工具目录 |||—— module//js模块外来js |├── less//less目录 |└── webpack.config.js//webpack配置文件 └── views ├── error.ejs └── index.ejs

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

找到package.json文件

{ "name": "express-sticky-note", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www", //windows用户添加下面一句代码 "webpack": "webpack --config ./src/webpack.config.js --mode=development" //遇到后面说的警告添加 --mode=development//mac用户添加 "webpack": "webpack --configsrc=https://www.it610.com/webpack.config.js" //警告解决方案往下看 }, "dependencies": { "cookie-parser": "~1.4.3", "debug": "~2.6.9", "ejs": "~2.5.7", "express": "~4.16.0", "http-errors": "~1.6.2", "morgan": "~1.9.0", "webpack": "^4.22.0" }, "devDependencies": { "webpack-cli": "^3.1.2" } }

4 在终端运行webpack

npm run webpack//windows 用户$ cd src $ webpack//mac用户

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

有个警告找到package.json 添加代码

"webpack": "webpack --config ./src/webpack.config.js --mode=development"//windows用户$ webpack --mode development //mac用户运行这段代码即可

在此目录目录执行npm run webpack除了警告还有一个报错

> express-sticky-note@0.0.0 webpack C:\Users\10479\Desktop\express-sticky-note > 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 -D npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sticky@0.0.0 webpack: `webpack --config ./src/webpack.config.js` npm ERR! Exit status 1 npm 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 additionallogging output above.npm ERR! A complete log of this run can be found in: npm ERR!C:\Users\10479\AppData\Roaming\npm-cache\_logs\2018-10-22T07_52_27_717Z-debug.log

根据报错内容需要安装webpack-cl 说什么就做什么乖乖听话

$ npm install webpack-cli --save-dev

5 配置script脚本
先安装

$ npm install --save-dev onchange

然后

$ "watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"//mac用户 //windows用户同样在刚刚修改的package.json文件的scripts中添加代码 "watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"