Ext JS的模块化开发（Package）| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Ext JS的模块化开发（Package）

## Ext JS的模块化开发（Package）
### Ext JS中的生产环境编译
在使用 sencha app build production命令构建生产环境时，Sencha CMD会在应用目录下创建 “build/production/应用名” 子目录，并将构建的结果放置与此目录下。举例来看：
![](/upload/picture/2022-09-27/upload_603822984dc4f5175bedf6e81dc18dd7.png)

生产环境的JS源码编译结果会集中到一下两个文件：
index.html
app.js
整个的机制就是： CMD会将所有的源码进行去注释、去空格等操作进行编译，最后汇总到一个html 和 js 文件中。这些编译的结果包括哪些部分呢？
首先包含时应用中自己编写的源码。
其次包括框架本身的核心代码。
最后还包括引入的非核心代码的其他包。
### Ext JS中的包（package）
Ext JS框架本身就是基于包（Package）开发的， 可以下SDK的目录结构
![](/upload/picture/2022-09-27/upload_f9868aafdbbf3025c5d7ef325571b47f.png)

以下面两面两个包来看：
core 框架核心代码
charts Ext JS的图库代码
### 为什么要拆分包开发？
拆分不同的包开发的目的就是实现前端的模块化和组件化。在开发的应用中，可以根据需要加载指定的模块。这个思想已经很接近基于Node.js和npm的开发方式了。
拆分不同包的好处， 举例来说有的应用压根不会使用到绘图相关的API，　如果不拆分包开发所有的代码全部打包成一块，在页面访问时这些代码需要首先下载到客户端机器，虽然经过了压缩， 但是哪些完全不使用的代码下载下来也是浪费， 况且，对于稍大的应用， 编译后的js文件并不小， 超过了2M。
拆分包开发还有一个重要的用途， 就是动态加载。这个适用在中型、大型乃至超大型的Ext JS的应用。当编译后的文件足够大的时候， 首次登录页面的速度就会变慢，但是首页需要显示的东西毕竟有限， 很多页面是在点击某些Link时才会显示，或者对于某个用户，某些组件压根就不会使用。这时候就可以分离某些包到单独的文件中。
Ext JS 为了解决单个单个下载源码文件到客户端机器， 对源码文件进行压缩，合并，减少传输文件的总体大小；但是完全合并的话，对于某些非必要或非即时使用的模块又显得浪费，所以又将某些包分离出来。正所谓： 分久必合， 合久比分。
综合一下， 拆分包开发的作用就是以下两个：
导我所需
动态加载
包的使用
包的使用方式很简单， 编辑应用下的app.json 文件
在requires下添加的包会被一并编译打包
动态加载，在requires下配置package-loader， 在uses下配置需要动态加载的包。
```javascript
requires:['package-loader'],uses:['dashboard','mysettings']
```

配置界面如下：
![](/upload/picture/2022-09-27/upload_5f5fa9189460b53c7e4b4fa491fa2a6e.png)
### 包的开发
可以直接使用Ext JS或其他第三方的包， 也可以在应用在开发自己的包，如果开发的包具备很高的共用型的话，也可以导出包给其他人使用。可以用来作为包开发的示例有：
某些共用组件和工具， 比如Ext JS本身的Chart， 字体图标库 font-awesome
主题包（Theme）
基于Ext JS开发的平台基础库。
分模块的应用。比如基于Ext JS构建了一个电子表单的应用，生成和销售相关的申请表单就是独立的应用模块。
在应用中创建包
命令行切换到Ext JS应用的根目录， 执行如下命令创建包：
```
sencha generate package mypackgae
```

以上命令会处理的操作包括：
在应用的根目录下创建 packages/local/mypackage目录， 并在该目录下创建包的结构(如果是使用现成的库， 则会放置在remote目录中，该部分在后续会介绍)
将该包添加到项目的依赖配置中（app.json）
在VS Code中执行以上命令的效果界面如下：
![](/upload/picture/2022-09-27/upload_8c5a3308fe40bd6e27c65b757ef00544.png)
包的开发
包的开发路径与应用基本类似：
src 放置js 源码
sass 放置CSS相关
resources 放置图片等资源文件
### 包的编译与导出
包只作为应用的一部分，在应用编译的时候会一并处理， 但如果这个包需要共用出来，供其他人下载使用， 则需要单独编译这个包，并且添加到库中。这里涉及几个问题：
什么是Ext JS的库？
如何编译库并提交库？
如何使用提交的库？
Ext JS中的库
在Sencha Cmd 安装的时候， 在安装目录会创建一个 repo的目录，这个目录就是本地库的位置。
![](/upload/picture/2022-09-27/upload_def26200bcc84d1b49c7fb2b96d4c0f0.png)

repo 目录的结构如下：
![](/upload/picture/2022-09-27/upload_6dcf53c30f5eb7f38cbafa5c3d57cad6.png)
.sencha 用于放置库机制的文件
pkgs 里面就是本地提交的库文件， 文件后缀是.pkg
这个库的控管机制，看上去和git很类似， 区别是git控管的是源码， sencha控管的是.pkg的打包文件。接下来就来介绍如何对一个本地开发的包进行编译和提交。
包的编译
在执行包的编译命令之前，必须先处理三件事情， 这三件事情都是在包目录的package.json文件中进行。
修改包的创建者。默认的值是anonymous， 但是在提交到本地库时， 会进行验证，不允许匿名提交。
![](/upload/picture/2022-09-27/upload_7db3c5a2232e40e07c3ec2d0ee31cbf2.png)
添加框架配置。 默认框架的配置是在注释中的（因为主题开发包的编译可以不需要）
![](/upload/picture/2022-09-27/upload_7664e090171be5067de122f7570b552b.png)
主题的配置， 默认也是在注释中。
这里需要注意， 配置的主题需要是Classic和Modern都支持的， 否则会报 “Fashion build exited with code : 1”的错误。
![](/upload/picture/2022-09-27/upload_4e7ba69a9430f7ad48acb1fcb612df77.png)
以上前置动作完成后， 命令行切换到包的路径中， 这里是D:\demoworkspace\extjs\ext7-demo-app\packages\local\mypackgae， 执行编译命令：
```
sencha package build
```

编译命令主要做了以下动作：
在包的目录下，创建build目录，并输出编译后的结果文件， 类似
![](/upload/picture/2022-09-27/upload_6e20318ce809f83a26c61ed4cff4a17c.png)
在项目的build目录下产生.pkg 的打包文件，提交到库就是使用这个打包文件。类似：
![](/upload/picture/2022-09-27/upload_bf1dc0d4ac0f51204b746110ce1562f7.png)
提交包到本地库
提交包到本地库，使用的就是上面产生的.pkg后缀的文件，但是开始之前同样有一个前置动作就是初始化库。也就是对提交的包的验证， 这里仅简单演示验证的方式，实际开发可以设置更安全的验证。
命令行切换到Cmd的repo目录， 执行repo init 命令：
```
cd D:\install\Sencha\Cmd\reposencha package repo init -name "OscarChen" -email "xxx@mail.com"
```

注意， 以上用户名中间不能有空格，否则有可能失败，命令执行成功的界面如下：
![](/upload/picture/2022-09-27/upload_f7ee0afe649b9a91de0da4b10ff24355.png)

这条命令会在 repo\pkgs.meta\profiles\ 目录下创建分割用户名的层级目录（每两个字符作为一个文件夹），在最底层的文件夹中产生一个以用户名命名， 以.json为后缀的文件， 文件的内容是JSON格式的配置文件，包括在命令行输入的用户名、邮箱、创建时间以及公钥等信息。（这个机制与Git又有很大的相似性）。
![](/upload/picture/2022-09-27/upload_6b88a6025d4de4a0d21a90b25cad5342.png)

接下来就是实际要提交包到本地库的操作了。
命令行切换到项目的build目录对应的包的目录，这里是 D:\demoworkspace\extjs\ext7-demo-app\build\mypackgae，执行
```
sencha package add mypackgae.pkg
```
以上命令会把包的.pkg文件以及版本相关信息放到Cmd安装的repo/pkgs 中。
到此， 包的开发、提交步骤就全部完成了。本地机器需要使用该模组只需要在项目的app.json的requires配置中加入包的名字。其他机器需要添加Repo的地址进行使用。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Ext JS的模块化开发（Package）

网站导航