NodeJS前端开发日记（1）搭建NodeJS+ExpressJS+AngularJS+Jade+LESS+Yeoman环境

干货满满张哈希

发布于 2021-04-12 15:18:51

7560

发布于 2021-04-12 15:18:51

最近做的项目我负责架构和全栈开发，前端从JSP转换到了Html + jquery+ajax，后端为Java。随着功能不断地迭代还有系统不断地壮大，前端纯html+jquery+ajax的问题也暴露出来了：

前端代码越来越大，复用性越来越差。
同步请求很难处理
依赖库越来越多，没有统一管理
CSS，JS和img压缩很麻烦
组内大部分都是偏向于后端的工程师，前端经验少，需要一个能快速上手的框架。

经过这些考虑，我决定采用NodeJS+ExpressJS+AngularJS（扩展HTML标签，动态HTML）+Jade（前端模板引擎，2016年4月已改名为PUG，但是改名后的版本还有问题，所以我们还是用Jade）+LESS（CSS面向对象化框架）+Yeoman（包括yo，bower和grunt的工具）+bower（前端库依赖管理，相当于maven）+Grunt（发布工具）的前端开发框架，来改造现有的前端，写这系列博客记录下。我们前端的容器还是tomcat，但是html相关的管理改到了NodeJS中，我们没有用任何NodeJS服务器内容，ExpressJS只是用来测试。真正的后端接口还有web层容器还是Java。

搭建NodeJS环境

本文使用Webstorm作为基本IDE。首先下载好NodeJS 4.4.4,（这个是长期稳定版）并安装，配置好环境变量（就是在terminal下能使用node命令还有npm），在WebStorm中新建NodeJS express项目：

模板引擎这里选择Jade，CSS渲染选择LESS。之后确认：

这里摆上npm包管理基本用法： 使用 npm 命令安装模块：

$ npm install <Module Name>

以下实例，我们使用 npm 命令安装常用的 Node.js web框架模块 Angular:

npm install angular

安装好之后，angular包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require(‘angular’) 的方式就好，无需指定第三方包路径。

var angular= require('angular');

npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如

npm install express          # 本地安装
npm install express -g   # 全局安装

本地安装 1. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。 2. 可以通过 require() 来引入本地安装的包。 全局安装 1. 将安装包放在 /usr/local 下或者你 node 的安装目录。 2. 可以直接在命令行里使用。

你可以使用以下命令来查看所有全局安装的模块：

$ npm ls -g

我们在这个项目中会用到yeoman。我们的项目管理依赖于Bower，因为这里NodeJS主要完成前端工作，对于前端的依赖管理，bower的目录结构更好一些。所以，我们使用WebStorm自带的命令行，快捷键alt+F12. 唤出命令行，执行：

npm install yo
npm install bower
npm install grunt-cli

之后，我们在项目根目录创建.bowerrc文件（填写bower管理的依赖库路径）：

{
  "directory": "./public/lib"
}

再在根目录创建bower.json文件（填写项目信息和依赖库）：

{
  "name": "sfpp-frontend",
  "version": "3.0.0",
  "dependencies": {
    "angular": "~1.5.8",
    "angular-route": "~1.5.8",
    "bootstrap": "^3.3.7",
    "angular-bootstrap": "^2.2.0",
    "stickUp": "^0.5.7"
  },
  "devDependencies": {}
}

注：bower install angular --save会添加angular并更新文件运行：