node package manager

BMFE_scaffold

本木前端脚手架

配置文件

准备简单的写一个启动工具,能迅速搭建项目,并进入开发。

工具是基于 gulp + webpack,自己写了一些简单的中间件能将线上的静态资源请求导向线下,并配有一些 gulp 的服务。

初期具有三个命令:initservermin

init

创建项目初始化,根据提示会帮你创建一个项目,项目目录是前端硬性规定的目录结构,包含一些必要的服务。

server

启动一个服务,目前服务的配置还只能写到配置文件中。做到一人配置其他项目开发也可用

启动服务还可以根据配置启动多个代理和一个 mock server,可以便于前期开发,开发时写入假数据,完全分离前后端开发

并且能支持 https 的服务,-s 或者 --sslhttps证书路径,即可启动一个https的服务,也可以配置端口

发布之后,线上的会生成相应版本号的静态资源文件。启动服务之后会拦截到这个请求将这个请求转到线下

服务支持 cors 跨域。在加上本身的代理。开发,线上调试不需要任何代理

支持 vuecoffeejsones6jsx 等语法

min

打包压缩开发时的各种文件,压缩出一个 dist 文件准备发布。

打包完成后自动将打包好后的 version 回写到 html 中,在完全分离的项目中已经可以做到线下开发,一键发布。

启动多线程打包。如果项目工程特别大。引入的资源文件特别多时,比 gulpwebpack 打包效率提高很多倍。

installuninstall

通过私有源的支持,直接支持类 bower 私有库。

配置文件也会在 config.js 中自动生成。一个配置文件解决所有问题

hint

支持 eshintjs 语法检测,可以在上线之前跑一下自己的 js 有没有严重的语法错误

注意

由于对 webpack 的依赖,而且 webpack 在对于 loader 的使用时必须在当前目录下加载 loader, 所以目前还没有办法摘除这部分。这块之后会解决。目前需要在项目的根目录下加载 loader, 目前自带的 loadercoffee-loader,而且也还没有对 loader 做出对应的扩展。

需要在项目根目录下执行 npm install coffee-loader,之后一定会改进

内部详解

  • package.json:用于构建工具的包依赖。
  • bower.json:用于前端静态资源的包依赖。
  • webpack.config.js:用于 js 的动态合并,提供 require,自动读取 前端包依赖
  • gulpfile.js:核心工具配置。主要功能有:基础服务,启动即开一个页面到该服务,清空 dist 文件夹,监听文件变动,文件变动自动刷新,合并压缩 HTMLJSCSS,angularjs template 打包,mock 数据。
  • 【重要】 config.json 对应的项目配置文件

目前已改为一个配置文件 config.js

项目初始化

初始化工具组件:npm install

初始化前端依赖:bower install

PS:在加载私有包依赖时统一在后面加上 --save-dev

项目启动

启动命令:

开发环境启动:`sudo gulp dev`

线上环境启动:`gulp`

其他命令:

`gulp dev --reload`:文件改变自动刷新页面。

`gulp clean`:删除 `dist` 文件。

`gulp cleanAll`:删除所有依赖(包括:`node_modules`、`bower_components`、`dist`)。

目录结构

·

|-- .gitignore          (需要忽略的文件:/node_modules、/bower_components、/dist)

|-- node_modules        (node 依赖)

|-- bower_components    (前端依赖)

|-- html                (对外输出页面)

|-- src                 (资源文件)

    |__ js              (JS 资源)

        |__ exports     (对外暴露的 JS,用于页面中引用)

        |__ views       (切分 views,用于模块化)

        |__ others      (其他文件,如:common、utils)

    |__ css             (CSS 资源)

        |__ exports     (对外暴露的 CSS)

        |__ others      (其他文件)

    |__ html            (切图同学存放 HTML 的地方)

    |__ mock            (mock 数据存放目录,mock 数据写法请参照 gulp-mock-server)

    |__ templates       (angularjs templates 存放模板的地方)

配置文件

{
    // gulp server 的配置
    "server": {
        "path": "../",
        "port": 80,
        "proxy": [{
            "route": "/proxy",                  // 代理拦截目录
            "target": "127.0.0.1:52077/proxy"   // 转发的目录
        },{
            "route": "/name",
            "target": "127.0.0.1:52077/index"
        }]
    },
    // mock server 的配置
    "mockServer": {
        "port": 52077,
        "mockDir": ""
    },
    // 默认打开的页面
    "openPath": "http://fe.benmu-health.com/scaffold/dist/html/index.html",
    // 对外暴露的 js、css 文件
    "exports": [
        "css/exports!dir-css",      // 将 css/exports 文件夹中的所有 css 对外暴露
        "css/aaa/bbb.scss",         // 将 css/aaa/bbb.scss 文件中的所有 css 对外暴露
        "js/exports!dir-js",        // 将 js/exports 文件中的所有 js 对外暴露
        "js/exports/karyn.js"       // 将 js/exports/karyn.js 文件中的所有 js 对外暴露
    ],
    // alias 重命名
    "alias": {
        "Views": "js/views",
        "Common": "js/common",
        "Utils": "js/utils"
    }
}

部分规范

目前前端的规范较少。我们还是希望前期通过规范来约束大家的代码习惯与质量。突然添加可能想到比较少,但我希望大家想到一点就在这个文档里进行添加。先添加到一定量,我们再来整理先后顺序。

脚手架规范

bower_components 组件的引用

引用 `bower_components` 中的组件时。直接在文件中 `require` 即可。

如:`var Vue = require('vue')`。

`require` 中的 `vue` 取自对应 `bower_components` 组件中的 `bower.json` 或者 `package.json` 中的 `name` 属性

mock 数据的使用

只有在 dev 环境下才能使用,配置文件在 gulpfile 中的 MOCKHOST 中。

服务默认是启动在 http://127.0.0.1:52078/,对应的 url 是 mock 文件中的映射。

mock 数据的格式使用请参照 gulp-mock-server

gulp server proxy

支持数组和对象两种格式。

最简配置(如果 mock server 的地址是 127.0.0.1:52077 )

    {
        "route": "/proxy"
    }

    // 访问地址

    http://127.0.0.1/proxy/127.0.0.1:52077/index/index?id=123

对象配置

    {
        "route": "/proxy",                  // 代理拦截目录
        "target": "127.0.0.1:52077/proxy"   // 转发的目录
    }

    // 访问地址

    http://127.0.0.1/proxy/index?id=123

    {
        "route": "/proxy",                  // 代理拦截目录
        "target": "127.0.0.1:52077"   // 转发的目录
    }

    // 访问地址

    http://127.0.0.1/proxy/index/index?id=123

数组配置

    [{
        "route": "/proxy",                  // 代理拦截目录
        "target": "127.0.0.1:52077/proxy"   // 转发的目录
    },{
        "route": "/name",
        "target": "127.0.0.1:52077/index"
    }]

    // 访问地址

    http://127.0.0.1/proxy/index?id=123
    http://127.0.0.1/name/index?id=123

JS 规范

数组 for 循环的使用

在浏览器支持的情况下推荐使用 `map`、`forEach`等。

一定要遍历时,请使用

    `for(var i=0, len=data.length; i<len; i++)`

单纯循环时,请使用下面这种方式。`但是一定要记住这种情况的遍历是逆序的`

    `for(var i=data.length; i--;)`

获取 DOM

`html` 中 `JS` 需要获取 `DOM` 时使用`js-getDom`。