A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

       在开发中我们搭建node项目需要进行很复杂的配置安装跟多第三方资源,下面我带领大家搭建一个完整的node项目,代码我已经上传到github,欢迎下载学习。tip:回帖将有机会获得黑马币~
github地址https://github.com/haoyongliang/quickly-create-node-project.git
创建最基本的node项目1.全局安装expressnpm install -g express
2.全局安装express-generatornpm install -g express-generator
(输入express --help 测试是否安装成功)
3.进入到工程父目录cd [工程父目录名]
4.快速创建工程结构express -t [模板引擎名:ejs/jade] [工程名]
我一般是用express -e mypro
5.修改package.json,将里面的ejs依赖删除6.安装node_modules执行命令 node install或者执行 npm install--production,只安装dependencies,不安装devdependencies7. 安装supervisor
项目代码修改或者down机需要重启服务器,我使用的是supervisor,还可以用nodemon
npm install --save supervisor
修改package.json
"start": "supervisor ./bin/www"
8. 模板引擎和模板的修改
  • 安装nunjucks模板引擎
npm install --save nunjucks
  • 在项目根目录添加config.js,内容如下
var path = require('path')module.exports = {  viewPath: path.join(__dirname, 'views')}
  • 替换app.js中的模板引擎,将ejs修改为nunjucks
var nunjucks = require('art-template');// 配置使用 NunJucks 模板引擎nunjucks.configure(config.viewPath, {  autoescape: true,  express: app,  watch: true,  noCache: false})
  • 修改模板文件
    • 找到文件:views/index.ejs, views/error.ejs
    • 将文件后缀ejs修改为html
    • 将模板文件里面的<%= xx %>替换成{{ xxx}}
  • 修改涉及到模板渲染的js:app.js,router/index.js
    • 将其中的render("xxx")加后缀修改成render("xxx.html")

9. 修改路由
  • 在项目根目录(app.js所在目录)添加controllers目录,并在目录下添加index.js,用于存放路由的具体业务逻辑
module.exports.homePage = (req, res, next) => {        res.render('index.html',{title:'Express'});}
  • 修改routes/indexs.js路由,引用controllers/index.js
var express = require('express');var router = express.Router();var handler = require('../controllers/index')/* GET home page. */router.get('/', handler.homePage);module.exports = router;
  • 去掉路由中的重复路径 在routes目录下有个user.js路由,该路由的配置信息可能是
route.use('/user/add', xxxHandler);route.use('/user/edit', xxxHandler);
通过观察发现,每行都有'/user' 比较麻烦,为了简化配置 我们需要修改路由
  • 在app.js中添加如下信息
var user = require('./routes/user');// 挂载用户路由// 加上前缀,这样的话,user 中的路由就都必须是以 /user开头才行app.use('/user',user);
  • 修改routes/user.js
var express = require('express');var router = express.Router();route.use('/add', xxxHandler);route.use('/edit', function(req, res, next) {  res.send('add student');});module.exports = router;
10. 测试是否可以正常运行
升级node项目:代码规范,托管1. 添加代码规范
项目根目录新建文件.editorconfig,内容如下
# http://editorconfig.orgroot = true# 对所有文件生效[*]charset = utf-8# 缩进类型 可选值,space,tabindent_style = space# 缩进数量indent_size = 2# 换行符格式end_of_line = lf# 是否在最后一行添加换行insert_final_newline = truetrim_trailing_whitespace = true# 对后缀名为 md 的文件生效[*.md]trim_trailing_whitespace = false
使用github托管
  • 新建.gitignore文件,将不需要托管的文件或文件夹添加进去,下面是我的配置信息
    • node_modules
    • .idea
    • dist
  • git init
  • git add .
  • git commit -m "第一次代码提交"
  • git remote add origin gitUrl
  • git push origin master

添加babel ES6转码器1.安装ES6转码规则npm install --save-dev babel-preset-es2015
2.在项目根目录添加.babelrc配置文件,内容如下  {    "presets": [      "es2015"    ],    "plugins": []  }
3.在项目中添加babel-cli工具,用于命令行转码
注意:只能使用npm,别使用npm install 安装包依赖,会报丢失模块错误,如果要使用cnpm安装,请全局安装babel-cli工具(参见阮一峰ES6)
npm install --save-dev babel-cli
4.修改package.json{  "devDependencies": {    "babel-cli": "^6.0.0"  },  "scripts": {    "build": "babel ./src -d ./dist"  },}
5.在项目跟目录新建src和dist目录,将bin,controllers,routers文件夹和app.js,config.js文件放入src目录,修改bin/www 添加后缀bin/www.js6.运行 命令进行转码,测试安装是否顺利npm run build
7.安装babel-register
  • 安装
npm install --save-dev babel-register
8.在项目根目录新建index.js,内容如下require('babel-register')require('./src/bin/www')

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马