一、初始化项目
-
新建项目
git init manager -
新建view文件夹,建几个静态文件夹
-
新建app.js
-
快速初始化项目依赖
npm init -y -
安装express
npm install --save express -
运行 app.js
const express = require('express'); const app = express(); app.get('/', (req, res)=>{ res.end('hello, itLike'); }); app.listen(3000, ()=>{ console.log('server is running'); });node app.js
二、配置 babel
作用： 开发阶段写的时候用ES6，由于 node可能对一些ES6的语法支持不是太完全，所以在babel的帮助下，运行的时候系统会将ES6 的代码 转换为 ES5 ，这样就可以保证所有的语法都能正常运行了
1.新建 .babelrc 文件
-
.babelrc 中输入
{ "presets": [ "env" ] } -
执行：npm install babel-preset-env --save-dev /* 为什么要用--save-dev：生产环境中不需要，上线部署的时候执行 npm install --production */
2. 安装babel-register
babel-register可以理解成一个小插件，将es6的东西转成es5.
执行 npm i babel-register --save-dev
三、新建 main.js
1. 中间过渡
即通过运行 main.js ,间接的运行 app.js
require('babel-register');
require('./app');
2. app.js
// const express = require('express');
import express from 'express'
3. 运行
node main.js
如果main.js 里面，没有 require('babel-register') 这句，运行就会报错 SyntaxError: Unexpected identifier........
所以，可以看出babel-register的作用
如此一来，暴露在外面的就是我们的main.js文件了，main.js 文件就是项目的入口文件
4. babel 转化
用 babel 命令把 app.js es6 的内容转换为 es5
$ babel ./app.js
bash: babel: command not found
说明需要安装一下 cli
全局安装： npm install -g babel-cli
或
局部安装： npm install babel-cli --save-dev
使用babel命令，如果在命令行工具中无效，就使用全局安装,
命令行窗口执行结果:
$ babel ./app.js
'use strict';
var _express = require('express');
var _express2 = _interopRequireDefault(_express);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de fault: obj }; }
var app = (0, _express2.default)(); // const express = require('express');
app.get('/', function (req, res) {
res.end('hello, express');
});
app.listen(3000, function () {
console.log('server is running');
});
接下来进入主线步骤：
babel src -d dist
命令的作用是将 src 下的所有文件 用babel 转成 es5的文件，并放到 dist文件夹下
结果：srcapp.js -> distapp.js ，目前的目录结构为：
开发和生产分离：
开发环境： npm run dev
生产环境：npm run build 、 npm start
四、配置项目依赖
1. 引入项目中需要用的第三方类库
npm i --save bootstrap@3.3.7 font-awesome nprogress jquery echarts
-
font-awesome：一套绝佳的图标字体库和CSS框架 http://fontawesome.dashgame.com/
-
nprogress： 轻量级的进度条组件，另外还有一款叫 nanobar
NProgress.js：http://ricostacruz.com/nprogress/
nanobar.js：http://nanobar.micronube.com/
-
echarts： 百度那个可视化图表库
2. 在src目录下
新建config.js
import {join} from 'path'
export default {
viewPath: join(__dirname, '../views')
}
app.js 中：
import config from './config'
import express from 'express'
const app = express();
// 1. 设置模板引擎view engine setup
app.set('views', config.viewPath);
app.set('view engine', 'ejs');
// 2. 配置静态的资源
app.use(express.static(config.public_path));
app.get('/', (req, res,next)=>{
res.render('index');
});
app.listen(3000, ()=>{
console.log('server is running');
});
安装ejs模板： npm install ejs --save
启动： npm run dev 访问 http://localhost:3000/ ，就可以访问到我们的页面了
3. 引入node_modules中的资源文件
app.js
......
// 2. 配置静态的资源
app.use(express.static(config.public_path));
app.use('/node_modules', express.static(config.node_modules_path));
......
4.新建public文件夹, 引入静态资源
config.js
import {join} from 'path'
export default {
viewPath:join(__dirname,'../views'),
public_path:join(__dirname,'../public'),
node_modules_path:join(__dirname,'../node_modules')
}
import {join} from 'path' 意思就是取 path 里的方法，也可以 import path from 'path' ,下面拼接的时候用 path.join() 即可。
app.js
app.use('/public', express.static(config.public_path));
在index.ejs中, 引入 modules里的文件如下，其他静态文件直接引入即可
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
5. 配置nodemon
nodemon用来监视node.js应用程序中的任何更改并自动重启服务 ，这样开发中就不用频繁手动重启服务了。
nodemon 可参考博客：http://www.cnblogs.com/JuFoFu/p/5140302.html?utm_source=tuicool&utm_medium=referral
npm install -g nodemon
启动：
nodemon [your node app]（相当于 node [your node app]）
在这里我们根据实际情况，更改 package.json 中的内容
"dev": "node main.js" 改为： "dev": "nodemon main.js"
五、 配置新的模板引擎 Nunjucks
以上使用的模板引擎是 ejs ,下面用 Nunjucks，JavaScript 专用的功能丰富、强大的模板引擎。
-
删除ejs配置nunjucks，
npm uninstall --save ejs -
安装nunjucks
npm install nunjucks --save
然后：app.js
import nunjucks from 'nunjucks';
nunjucks.configure(config.viewPath, {
autoescape: true,
express: app,
// noCacht 不要缓存，避免开发过程中造成的数据不准确
noCache: true
});
app.get('/', (req, res, next)=>{
// 用 nunjucks ,这里要加上文件后缀了
res.render('index.html');
});
- nunjucks模板引擎没有对模板文件名的后缀做特定限制,如果文件名是index.html, 则渲染是就需要传递 index.html
- 到处 可运行，无论是 node 还是任何浏览器都支持，并且还可以预编译模板。
运行 npm run dev ,访问 ok.