手把手教你系列 - 工程化配置

前端工程化是前端领域在不断发展摸索过程中,总结出的使用软件工程对项目的开发上线维护等阶段中进行管理的集成解决方案。

chameleon根据自身框架特征,设计并完成了一套具有高度自由度可定制化的自有工程化解决方案,可在以下几个方面针对不同场景进行配置支持。

  • 数据mock
  • 打包构建
  • 文件指纹
  • 代码压缩

项目初始化

按照快速上手新建一个以test_project为名称的项目。

项目的source目录如下:

src
├── app
│   └── app.cml
├── assets
│   └── images
│       └── chameleon.png
├── components
│   ├── com2
│   │   └── com2.cml
│   └── demo-com
│       └── demo-com.cml
├── main.js
├── pages
│   ├── a
│   │   └── a.cml
│   └── index
│       └── index.cml
├── router.config.json
└── store
    ├── actions.js
    ├── getters.js
    ├── index.js
    ├── mutations.js
    └── state.js

数据mock

数据mock是前后端分离的基本保障,在快速上手中已经有了比较详细介绍,这里就不在赘述。

打包构建

执行如下命令

$ cml build

打包出来的dist目录结构如下

dist
├── config.json // 各端映射关系表
├── web         // web端部署包
├── weex        // weex端部署包
└── wx          // wx端部署包

进入weex包, 并查看weex包内容

$ tree dist/weex
dist/weex/
└── test_project_c6bdf9074a821f01e70f.js

cml build默认在打包的时候添加文件指纹,因为大多数场景下,静态资源以强缓存的方式会存放到cdn上,使用文件指纹可以避免代码修改后,客户端缓存导致未更新的问题。 从上边的结果上看打包出来的weex bundle文件名已添加上了文件指纹。

不过有些场景下希望不添加文件指纹,比如静态资源为使用协商式缓存的情况。

文件指纹

让我们一起把文件指纹去掉,进入刚才创建项目的根目录,找到并打开根目录下的chameleon.config.js,找到如下代码片段。

  weex: {
    dev: {
    },
    build: {
      publicPath: `${publicPath}/weex`,
      apiPrefix
    },
    custom: {
      publicPath: `${publicPath}/wx`,
      apiPrefix
    }
  }

weex.build下 增加hash: false的配置

  weex: {
    dev: {
    },
    build: {
      publicPath: `${publicPath}/weex`,
      apiPrefix,
      hash: false
    },
    custom: {
      publicPath: `${publicPath}/wx`,
      apiPrefix
    }
  }

再次执行

$ cml build
$ tree dist/weex/
dist/weex/
└── test_project.js

只需简单的配置,文件指纹即已去除!

代码压缩

代码压缩作为前端工程师的性能优化利器,chameleon已默认配置了build的阶段的代码压缩。

当然,也有某些场景下需要构建出来的产物不进行代码压缩,比如集成测试的时候,使用压缩前的代码能够最便捷的发现问题,下面操作如何取消代码压缩。

仍旧打开根目录下的chameleon.config.js文件,增加minimize: false参数即达目的。

  weex: {
    dev: {
    },
    build: {
      publicPath: `${publicPath}/weex`,
      apiPrefix,
      hash: false,
      minimize: false
    },
    custom: {
      publicPath: `${publicPath}/wx`,
      apiPrefix
    }
  }

再次执行

$ cml build

这时构建出来的代码即为压缩前代码。

results matching ""

    No results matching ""