Node.js笔记07——不使用generator自定义一个项目,深入了解项目结构

一、初始化项目

  • 新建项目 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 ,这样就可以保证所有的语法都能正常运行了

https://babel.docschina.org/

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文件夹下

结果:src\app.js -> dist\app.js ,目前的目录结构为:

Node.js笔记07——不使用generator自定义一个项目,深入了解项目结构

开发和生产分离:

Node.js笔记07——不使用generator自定义一个项目,深入了解项目结构

开发环境: npm run dev

生产环境:npm run build npm start

四、配置项目依赖

1. 引入项目中需要用的第三方类库

npm i --save bootstrap@3.3.7 font-awesome nprogress jquery 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 专用的功能丰富、强大的模板引擎。

https://nunjucks.bootcss.com/

  • 删除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.

上一篇:CentOS下shell显示-bash-4.1#不显示用户名路径的解决方法


下一篇:01-08-04【Nhibernate (版本3.3.1.4000) 出入江湖】二级缓存:NHibernate自带的HashtableProvider之命名缓存