黑马程序员技术交流社区

标题: 从零开始搭建NODE项目（一） [打印本页]

---

作者: 郝永亮    时间: 2017-9-28 18:11
标题: 从零开始搭建NODE项目（一）

       在开发中我们搭建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. 测试是否可以正常运行

访问 http://localhost:3000/users/add

---

升级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')

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2