模块化 Modular

CommonJS

1. 安装

Regular UI中使用npm+webpack打包JS文件。

首先确保安装了WebPack CLI：

npm install -g webpack

然后在项目中安装Regular UI：

npm install regular-ui

2. 引入

一次性引入所有组件

在index.js文件中添加：

var RGUI = require('regular-ui');
new RGUI.Calendar().$inject('#app');

然后打包：

webpack index.js bundle.js

Demo >>

单独引入某个组件

在index.js文件中添加：

var Calendar = require('regular-ui/src/calendar');
new Calendar().$inject('#app');

注意：单独引入组件，在WebPack打包时需要text-loader插件来引入模板：先安装插件npm install text-loader，再在webpack.config.js中添加

module: {
        loaders: [
            {test: /\.html$/, loader: 'text-loader'}
        ]
    }

然后打包：

webpack index.js bundle.js

Demo >>

AMD

1. 安装

使用RequireJS加载Regular UI。

首先在HTML的<head>中添加：

<script data-main="index.js" src="require.min.js"></script>

使用Bower下载Regular UI：

bower install regular-ui

2. 引入

在index.js文件中添加：

requirejs.config({
    baseUrl: 'bower_components/regular-ui',
    paths: {
        Regular: 'vendor/regular.min'
    }
});

require(['js/regular-ui.min'], function(RGUI) {
    new RGUI.Calendar().$inject('#app');
});

Demo >>

提示：使用Regular UI要先引入Regular。

自定义打包组件

1. 安装

首先确保安装了gulp：

npm install -g gulp

然后在项目中安装Regular UI以及依赖包：

npm install regular-ui
cd node_modules/regular-ui
npm install

2. 配置

Regular UI目录下的structure.js是全部组件的配置。

将structure.js复制为structure.customized.js：

cp structure.js structure.customized.js

然后打开后注释或者删除掉不需要的组件，如下：

    'Select2': {type: 'css+js', category: 'unit', lowerName: 'select2', requires: ['Dropdown']},
    'Select2Group': {type: 'js', category: 'unit', lowerName: 'select2Group', requires: ['Select2']},
    // 'TreeSelect': {type: 'js', category: 'unit', lowerName: 'treeSelect', requires: ['Select2', 'TreeView']},
    'Suggest': {type: 'css+js', category: 'unit', lowerName: 'suggest', requires: ['Dropdown']},
    // 'Uploader': {type: 'css+js', category: 'unit', lowerName: 'uploader'},

3. 打包

运行gulp命令：

gulp customize

最后在./dist目录中将会生成以下文件供使用：

css/regular-ui.theme.customized.css
css/regular-ui.theme.customized.min.css
js/regular-ui.customized.js
js/regular-ui.customized.min.js

TODO：后续会提供Web自定义打包服务。