[原创] 分享一下Sencha 三种环境(开发环境、测试环境、生产环境)的优雅配置方案

时间:2023-06-15 11:33:44

背景介绍:

在一个AspNet MVC Web API的后端Web开发项目中,使用了Sencha6.5+作为前端表现技术。

在进行两种开发框架的物理文件整合的时候,笔者不想把他俩的物理文件都“揉”在一个文件夹下面。

想尽量隔离开来,方便前后端两类开人员,把精力只关注到自己的开发文件上。

具体配置:

1、在Asp.Net MVC Web API项目文件夹下,新建一个文件夹“extjs”(名称可以根据自己的需要,随意),把Sencha创建的前端项目文件都放置在此文件夹下。

2、接下主要是针对app.json文件的设置:

2.1  告诉Sencha,你的网站首页文件的相对路径:

"indexHtmlPath": "../index.html",

  

2.2 告诉Sencha,你的测试环境和生产环境在输出时,你的网站首页文件的相对路径,以及使用非嵌入的microloader:
"output": {
"page": "../../../../IndexOutput.htm",
"microloader": {
"path": "microloader.js",
"embed": false,
"enable": true
}
}

3、关于2.1里提到的index.html

该文件存在的目的,主要是为了提供一个嵌入式的microloader占位。

<script id="microloader" type="text/javascript"></script>

4、关于2.2里提到的IndexOutput.htm

该文件存在的目的,主要是为了提供一个网站首页输出。

<script  id="microloader" data-app="1900dd7d-7922-4a63-a091-ff81f79d5617" src="extjs/build/production/AppDemo/microloader.js"></script>

  注:上面是生产环境的发布路径。microloader.js文件,是因为我在2.2节提到的在app.json中设置了output/microloader/path,以及embed:false 产生。(因为我不喜欢把一堆启动脚本生成成首页文件中,我喜欢这样独立一点,这样,引用的时候就固定这个路径就好了)

5、网站真正的首页。

上面4,5,两节提到的 两个index.htm文件,他们的作用,我只用在的编译的时候,配合Sencha编译器使用。我们项目的真正的首页文件,在Asp.Net MVC项目的View视图目录下,打开主要代码如下所示:

    <!-- 开发版 -->
@*<script id="microloader" data-app="1900dd7d-7922-4a63-a091-ff81f79d5617" src="extjs/bootstrap.js"></script>*@
<!-- 测试版 -->
@*<script id="microloader" data-app="1900dd7d-7922-4a63-a091-ff81f79d5617" src="extjs/build/testing/AppDemo/microloader.js"></script>*@
<!-- 发布版 -->
<script id="microloader" data-app="1900dd7d-7922-4a63-a091-ff81f79d5617" src="extjs/build/production/AppDemo/microloader.js"></script> </head>

通过上面的一系列的设置,我的目标达到了。
1)在通常开发时,使用“开发版”的js脚本启动sencha框架。cmd使用 Sencha app watch配合开发。

2)在使用测试版本的时候,cmd使用sencha app build testing。使用“测试版本”的js脚本启动sencha框架。(编译为测试版本时,js会打包在一个js文件中,但不会混淆代码,代码还是可以很容易debug的)

3)在使用发布版本的时候,cmd使用sencha app build production。使用使用“发布版本”的js脚本启动sencha框架。

最近花了不少时间研究,年纪大了害怕忘记,特地文字记录一下。

如果有朋友需要,强烈建议结合实际操作。感觉写的相当的啰嗦。:)

The End.