Node.js筆記07——不使用generator自定義一個項目，深刻了解項目結構

1、初始化項目

• 新建項目 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

2、配置 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

​

3、新建 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 ，目前的目錄結構爲：

​

開發和生產分離：

開發環境： npm run dev

生產環境：npm run build 、 npm start

​

4、配置項目依賴

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"

​

​

5、 配置新的模板引擎 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.