node package manager

oe-simplebuild

simplebuild

一个简单的前端集成构建工具。

现在的前端构建工具数不胜数,如 webpack, gulp, grunt 等。它们都非常强大,能够有效的提升开发体验。但是,对于 js 新手而言,接触这些并不能让他们的工作效率有所提升,反而会被各种配置绕晕,结果白白浪费了许多时间;对于有经验的熟手来说,如果每次配置这些工具都需要重新学习一遍这些工具也是低效的。为了一劳永逸,就写了这个工具。

简单介绍下这个工具的特性:

  • 配置简益求简
  • css, js, html 打包压缩一气呵成
  • 以 commonjs 方式写代码,ES6 也可以
  • 自带开发服务器,代码改变后自动在内存打包
  • 模拟任意前端 ajax 请求,支持批量生成数据

安装

直接从 npm 安装:

npm install oe-simplebuild -g

安装完成之后,命令 sb (即 simplebuild 的简写)就可以运行了。

使用

运行 sb 可以查看自带的帮助:

Usage: sb [command] [options] [cfgfile]
command:
    build         打包压缩
    server        运行开发服务器
    gen           生成 build.json
options:
    --production  启动生产模式
    --development 启动开发模式,默认
cfgfile:          默认为 ./build.json

开发服务器

sb 的主要目的之一就是实现一个服务器:当本地 js 文件发生变化的时候,自动根据 require 或者手动指定的依赖构建目标 js 文件

build.json

sb 需要指定一些参数来运行,这些参数放在 build.json 文件中。sb 默认读取当前目录的 build.json

下面是默认运行 sb gen 生成的 build.json

{
    "server": {
        "host": "127.0.0.1",
        "port": 8080
    },
    "development": {
        "backend": "./ajax",
        "urlmaps": {
            "/": "./views/index.html",
            "/login": "./views/login.html",
            "/static": "./static/src"
        },
        "dynamic_assets": [{
            "url": "/static/js/all.js",
            "input": ["src/js/file1.js", "src/js/file2.js", "src/js/file3.js"],
            "output": "src/js/all.js",
            "output_minify": "dist/js/all-min.js"
        }]
    },
    "production": {
        "backend": "10.2.81.136:8081",
        "urlmaps": {
            "/": "./views/index.html",
            "/static": "./static/dist"
        }
    }
}

server 指定内部服务器启动时绑定的地址和端口

developmentproduction 分别是内部服务器运行在开发模式和产品模式使用的配置,它们的配置参数基本一致:

  • urlmaps 指定 url 到本地文件(夹)的映射关系,如:{"/static": "/path/to/file"},启动内部服务器后,访问 /static/js/app.js 将返回 /path/to/directory/js/app.js
  • backend 指定 ajax 数据后端。当前支持两种后端,一种是将请求映射到本地 json 文件,另一种是将请求转发给真实的后端服务器
  • dynamic_assets 指定动态资源。只有 development 模式支持。参见动态资源配置。

动态资源配置

下面参考一个例子来说明动态资源的功能:

{
    "url": "/static/js/all.js",
    "input": ["src/js/file1.js", "src/js/file2.js", ...],
    "output": "src/js/all.js",
    "output_minify": "dist/js/all.min.js"
}

开发时,浏览器访问 /static/js/all.js,内部服务器返回缓存的 src/js/all.js。当 input 里面的任意文件发生变化后,simplebuild 自动将 input 指定的文件合并到内存,当浏览器再次访问 /static/js/all.js 时,返回缓存内容。

构建时,simplebuildinput 合并到 output,如果指定了 output_minify,压缩 outputoutput_minify

动态资源支持 js, css。js 动态资源还支持下面的配置:

  • commonjs 表明 input 为 commonjs 风格的代码,构建的时候会根据 require 自动查找依赖
  • es6 表明 input 为 es6 代码,构建的时候会先翻译为 es5 代码。由于翻译为 es5 代码后, import 翻译为 require,所以指定了此配置意味着 commonjs: true