前端使用Express来开发项目

Express 是一个基于 Node.js 平台的 web 应用开发框架，它提供一系列强大的特性，可以帮助开发者创建各种 web 和移动设备应用。
用 Express 框架开发 web 项目可以直接构建整个项目框架并且将前端页面跟后台贯穿起来。

是一款高度包容、快速而极简的 Node.js Web 框架。

安装 node.js

Express 是基于 Node.js 的，所以 Node.js 的安装必不可少，不过因为之前通过 hexo 来架构博客的原因，我的电脑已经安装了。

用 npm 安装 express

npm 是随同 Node.js 一起安装的包管理工具，可以用来安装卸载一些 api 包。
使用命令行工具$ npm install (要安装的包)进行本地安装，可以加上-g或者--global进行全局安装。
这里执行命令$ npm install express就行。

构建项目

使用 express 来新建项目框架

cd进入想要建项目的文档夹，执行$ express (项目名称)，会在该目录下创建一个新的你所命名的项目工程。
这里我执行的是$ express yiyun --pug --css sass，因为我这里使用了 pug 和 sass 来协助项目开发。

关于项目框架的说明

试运行项目

项目创建好了之后，用命令行进入项目根目录，然后用npm i命令会安装 package.json 中的依赖项目。
通过执行$ npm start启动项目，到浏览器输入：localhost:3000，看到 Express 说明成功运行。

更好的开发体验

在编写项目的过程中，对代码进行调试时，每次调试时都需要关闭服务器才能进行重新刷新页面。
可以说对开发有着极大的不便，我们需要一些工具来让帮助我们有更好的开发体验。

Express 的 debug 模块

命令行输入$ DEBUG=(项目名称):* npm start就能执行 express 的 debug 模块。

使用 babel 来写 ES6

我在编写项目的 javascript 时，使用了 ES6 标准来撰写代码，但是目前的浏览器不支持大多的 ES6 标准，
这时候需要一款工具 babel 来帮助我们，babel 可以将 ES6 的代码转换为 ES5 标准，在当下 ES6 还没有在浏览器普及的今天，这可是大利器。

执行$ npm install -g --save-dev babel-cli babel-core babel-plugin-transform-runtime babel-preset-es2015
babel 已经在我们的项目中创建好了，这里的参数--save-dev会将所下载的工具保存到 package.json 的依赖项目中。

新建文档 .babelrc 并且写入

1
2
3

{
  "presets": ["es2015"]
}

根据需求在命令行输入命令

 转码结果输出到标准输出
 babel example.js

# 转码结果写入一个文档
# --out-file 或 -o 参数指定输出文档
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文档
$ babel src -d lib -s

这样就可以简单地运行 babel 了。

搭配 webpack 来开发

虽然可以编写 ES6 的代码了，但开发友好度依然不好，而且在调试的时候依然遇到了问题。

Uncaught ReferenceError: require is not defined

再查看一下错误位置，发现出现错误的原因是因为我们使用了 import 和 export ，babel 对其只是进行了翻译，并不会合并代码的内容。所以我们需要另一项工具———— webpack。

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文档打包在一起，将打包后的文档用于在浏览器中使用。

并且我们使用了 babel ，需要使用 babel-loader 来更好协助打包。

了解用途后，来命令行执行$ npm install -g --save-dev webpack webpack-cli babel-loader

新建webpack.config.js文档，并对其进行配置

var path = require('path')
module.exports = {
  entry : {
   main : './src/js/main.js'
  },
  output : {
 
  filename : '[name].js',
   path : path.join(__dirname, './public/javascripts'),
  },
  mode:"development",
  module: {
    rules: [
      {
     test: /.js$/,
     loader: 'babel-loader',
   exclude: /node_modules/,
      query: {
        'presets': ['es2015'],
        plugins : ['transform-runtime']
     }
   }
 ]
   }
};

最后在 package.json 里编辑命令

"scripts": {
  "dev": "webpack -w",
  "start": "node ./bin/www"
}

大功告成，另开一个命令行，分别执行$ npm run dev和$ DEBUG=yiyun:* npm start，现在 webpack 会监视 js 的改动，并重新发布成 main.js，代码修改后只需要刷新浏览器就可以进行调试了。

前端 使用Express来开发项目