[原创] 分享一下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.

相关文章