extjs 6 构建连接成 1 个文件

extjs 6 build concatenating into 1 file

我已经通过 sencha cmd 在 extjs 6 中生成了我的应用程序。在构建 sencha 应用程序时,我所有的 js 文件都被连接成 1 个文件(app.js)。我想保持我的 js 文件夹结构像以前一样帮助我调试和放置断点。 有什么办法可以做到吗?

您应该在构建之前进行调试。做一个构建真的就是这样,"compiling" 所有的 js 到一个文件中。

在某些情况下您需要调试构建代码本身,在这些情况下您可以关闭 YUI 压缩,以便您可以使用断点等。然后只需使用 "testing" 参数:

sencha app build testing

然后,在 build/testing 而不是 build/production 中找到您的构建。还有一个 sencha app build development 但它实际上只是对 building/updating 和 css bootstrap 有帮助,你最好使用 sencha app watch(因为它是如果需要,会不断监控和更新)

用于开发和部署的重要 Sencha 命令

sencha  app build development

它将生成开发版本。

sencha  app build production

它将生成生产版本(单个文件 app.js)。

 sencha  app build testing

它将生成测试版本。

sencha  app watch 

它将刷新并更新您的 extjs 文件。

 sencha  app build clean

它将进行干净的构建。

您可以而且应该调试您的 ExtJS 应用程序,而无需一遍又一遍地编译它。

对我来说,它的工作原理如下:

  • 我有一个服务器 API 位于 localhost/api/
  • 我有位于 localhost/app-dev/ 的未编译的 ExtJS 应用程序,包含 ext 子目录。
  • 我有位于 localhost/app/
  • 的已编译 ExtJS 应用程序

部署时,我会部署到真实服务器上

  • 把api改成server/subdir/api/
  • 应用进入server/subdir/app/

但是调试是在本地进行的。我的开发计算机有一个额外的 app-dev 目录,它使用相同的相对路径从相同的 api 中获取,并且未编译的版本始终是一个可以在您选择的浏览器中启动的完整版本。

因此,如果我只更改 javascript 并想测试,我不必等待编译 - 我可以重新加载 localhost/app-dev/index.html 就可以了。当我相信 app-dev 版本中没有错误时,我就双击 app 目录中生成编译版本的批处理文件。

如果我想测试CSS变化,我必须先编译,因为Sencha Cmd使用SCSS文件。这就是未编译版本想要从 build 目录中获取其 CSS 文件的原因——浏览器无法使用未编译的 CSS。但编译后,新的 CSS 也可用于未编译版本的应用程序。