regularjs / example

regularjs example collection

Regular Example Collection

1. webpack
2. 单页范例
3. NEJ

Webpack

Use Regular with webpack

$ cd webpack
$ npm install
$ webpack -w 

Then open the webpack/index.html.

单页系统范例

Use Regular with webpack

启动

cd routing
npm install  # or cnpm
npm start    # will open the browser

使用到的技术

• webpack + ES6: 你当然也可以替换为别的模块系统.
• fetch: 用来处理异步请求
• puer: 前端开发服务器 ： 静态 + mock接口等

命令介绍

在/routing根目录下

如果npm 无法运行， 请配置为淘宝的源https://registry.npm.taobao.org, 或者直接使用cnpm代替npm

npm install : 安装所有依赖(注意第一次安装可能时间较长)

npm start

开启模拟服务器， 并且开启webpack.

几个关键文件

• server_route.js : 是一个server端的路由配置， 所有数据都是伪造的， 你可以以类似的方式添加自己的接口， 修改后无需重启自动生效.
• webpack.config.js: webpack的打包配置. webpack命令会默认查找当前目录下的此文件.
• index.html: 入口文件， 我们将所有的page路由都指向了这个文件，使得前端可以完全接管路由部分.
• src/index.js: 前端的入口文件，主要是处理前端路由的配置
• src/components: 放置一些独立的组件
• src/module: 放置作为单页模块的组件
• src/util: 一些帮助函数.

NEJ

直接进入NEJ文件夹, 并开启一个静态服务器(加载html资源是使用的ajax), 建议使用puer

代码范例

define(['text!./login.html', 'pro/regularjs/dist/regular'] ,function( tpl ){

  // 注意Regular是全局取的，而不是注入的
  return Regular.extend({

    name: 'login-nej',

    template: tpl
    
  })


})

打包不会有任何区别.

example's Issues

webpack如何处理rgl文件中的图片路径

你好，我司最近有一个项目使用的是regularjs+regular-ui实现的，当初使用的是gulp打包，接下来需求增多想切换到webpack，参照你的例子把原先写在<script type="text/regular"></script>里的模板都写到了rgl文件里，遇到一个问题就是在模版里写的图片路径不能被webpack正确加载

• 问题重现步骤
  这个是rgl文件里的代码

<li>
    <div>
        <i class='instructions-number'>1</i>
        <p>进入财务会计——报表管理——报表编制——报表制作,如下图所示:</p>
    </div>
    <img src='../images/instructions/jdPrompt1.png' alt='导出操作说明' />
</li>

这个是引用的代码

import JsPrompt from '../components/jsPrompt.rgl';
...
common.dialog({
    title: "导出操作说明",
    contentTemplate: JsPrompt
});

这个是webpack配置

module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader'],
            include: [sourcePath]
        }, {
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: utils.assetsPath('/[name].[ext]?[hash]'),
                    publicPath: '../../../',
                    useRelativePath: process.env.NODE_ENV === "production"
                }
            }],
        }, {
            test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: utils.assetsPath('/images/[name].[ext]?[hash]'),
                    publicPath: '../../../',
                    useRelativePath: process.env.NODE_ENV === "production"
                }
            }]
        }, {
            test: /\.html$/,
            loader: 'html-loader'
        }, {
            test: /\.rgl(\?\S*)?$/,
            loader: 'rgl-loader'
        }, {
            test: '/\.xls$/',
            loader: ExtractTextPlugin('url-loader')
        }]
    },

• 期待的结果是什么？实际又是什么？
  期望所有图片都被转码；
  实际是：定义在html和css中的图片都转成了base64，但是rgl里的图片还是保留的相对路径

• 使用的版本是什么？在什么操作系统上？
  这是package.json的信息

    "regular-ui": "^0.1.8",
    "regularjs": "^0.6.0-beta.6",

node: v7.6.0
webpack: 3.0.0
macOS: 10.12.6