Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 

README.md

配置cube

cube在服务器端,前端都需要配置来运行

服务器端配置

服务器端的配置,会在服务起来的时候,被cube middleware加载 也会在 cube 命令行启动的时候 cube start 被加载 还会在 cube 编译的时候 cube build 被加载

静态资源目录下的package.json里,增加一个配置段:

{
    "cube": {
        /**
         * 用来提速用,一些模块发布的时候,已经打包压缩好的代码,可以通过map来加速
         */
        "moduleMap": {
          "react": "dist/react.js",
          "modulemap": "lib/index.js"
        },
        /**
         * 配置 processor, 不同的文件后缀,配置不同的processor,
         */
        "processors": {
          ".vert": "cube-text", // 单个processor
          ".frag": "cube-text",
          ".less": "cube-less",
          ".jsx": ["cube-react", ""], // 多个processor串联
          ".coffee": "cube-coffee",
          ".ejs": "cube-ejs",
          ".jade": "cube-jade",
          ".styl": "cube-stylus"
        },
        /**
         * 和 .cubeignore 功能类似, 配置该文件
         */
        "build": {
          "skip":[],  // 需要跳过的文件列表, 复制文件但不转化
          "ignore": [], // 需要忽略的文件,build的时候直接丢弃掉
          "exportModules": [
            "/css/test_css.css.js" // 需要保持独立导出的模块,保持不被合并掉
          ]
        }
    }
}

服务器端API

如果是编程来集成cube到现有的服务中(通常是一个middleware的形式集成),参考以下用法:

  var express = require('express');
  var Cube = require('node-cube');

  var middleware = Cube.init({
      root: 'your_static_resource_dir', //
      debug: false,
      middleware: true,
      version: '123',      // static file cache control
      resBase: '/static/'  // the http path prefix
  });
  express.use('/static', middleware);
  express.listen(8080);

Cube.init(options)

options 包含以下参数:

* root {String} 静态文件夹根目录
* middleware {Boolean} 作为middleware使用,返回一个middleware
* processors {Object} processor配置,绑定文件后缀到对应的processor, 其结构参考 package.json文件中的配置
* resBase {String} 指定静态资源http访问时的前缀
* debug {Boolean} 是否开启debug模式

客户端配置

html页面上,有两种方法配置:

  1. from html tag
<script
    data-base="/assets"
    data-main="/main.js"
    src="/${resbase}/cube_loader.js"
    type="text/javascript"/><script>

in this example, cube inited with configs wirtting in the script's attribute (in html5, we can access this attrbute which start with data- by api node.dataset) the hole config properties see belew.

  1. using client-side api
<script type="text/javascript" src="/${resbase}/cube.js"></script>
<script type="text/javascript">
(function () {
    Cube.init({
        base: '/assets'
    });
    Cube.use('/main.js', function (Main) {
        Main.run({
            // TODO global config here
        });
    })
})();
</script>

客户端API

在加载了 cube.js 之后, 会注入window.Cube这个全局变量,全局变量Cube上的几个接口文档如下

Cube.init(options)

  • @options object properties:

    • base {String}

    the assets base path(http path), without the ending /, like: /assets

    • remoteBase {Object}

    the remote assets base, this config is an object, like:

    {
      // remoteName: 'remotePath',
      datav: 'http://datav.component.aliyun.com'
    }

    cube support remote online script base, with remoteName as namespace, like datav:/npm/dcharts/line.js

    • timeout {Number}

    script loading timeout, unit ms, default is 15000ms

    • version {String}

    the static resource version, likemain.js?v=123, used to update cdn cache

    • charset

    set the loading script charset, default is utf-8, can be gb2312, gbk, etc. this property is working on the html script tag

Cube.use(path, callback)

  • path {String} 模块路径, 注意这里必须是模块的绝对路径(相对于assets root)
    • callback(module) {Function} 模块加载成功之后,调用这个callback,并将加载的module作为其第一参数传入