CabloyJS v3升级指南

介绍

CabloyJS v2前端基于Framework7 v4。由于Framework7 v5提供了更多特性，但有个别组件的接口规范进行了调整。为了拥抱Framework7 v5，给CabloyJS前端进行赋能，我们推出了CabloyJS v3

升级指南

1. 修改项目package.json文件

{project}/package.json

  "dependencies": {
    "cabloy": "^3.0.0-beta.4",
    "egg-born-module-a-cms": "^3.0.1",
    "egg-born-module-a-wechat": "^3.0.1",
    ...
  }

cabloy使用新版本^3.0.0-beta.4
egg-born-module-***开头的模块均使用新版本^3.0.1

2. 修改@ptr:refresh

ptr:refresh事件的第一个参数是done。例如：

...
<eb-page ptr @ptr:refresh="onRefresh"></eb-page>
...
    onRefresh(done) {
      done();
      this.reload();
    }

3. eb-navbar/f7-navbar

eb-navbar/f7-navbar增加了新的属性large largeTransparent，建议启用。例如：

<eb-page>
  <eb-navbar large largeTransparent ...></eb-navbar>
</eb-page>

4. 修改模块build目录

4.1 `{project}/src/module/{module-name}/build/front/utils.js`

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      esModule: false,
    },
  };

增加esModule: false

4.2 `{project}/src/module/{module-name}/build/front/webpack.base.conf.js`

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 1000,
          name: utils.assetsPath('img/[name].[contenthash].[ext]'),
          esModule: false,
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 1000,
          name: utils.assetsPath('fonts/[name].[contenthash].[ext]'),
          esModule: false,
        },
      },
    ],
  },

将url-loader改为file-loader
将[hash]改为[contenthash]
增加esModule: false

参考资料

关于更多Framework7 v5的新特性和升级指南，请参见： Migration to Framework7 v5

介绍