前言
前端开发一直处于快速发展的时期，各种新的技术层出不穷，其中一个重要的部分就是构建工具及其插件。这些工具能够大幅提升代码开发效率，降低出错概率。其中就有一个非常流行的包管理工具——npm，而本文要介绍的是一个基于 npm 的前端构建工具——sencha-cli。
sencha-cli 是一款专门为 Ext JS 和 Sencha Touch 应用打造的前端构建工具。它可以帮助开发者进行项目初始化、打包压缩、代码生成等一系列操作，大大减少了前端开发的工作量和时间成本。然而，对于初学者来说，使用 sencha-cli 存在一定的学习曲线，因此本文将详细介绍其使用教程，帮助读者更快更好地掌握这款工具。
安装 sencha-cli
使用 npm 安装 sencha-cli 非常方便，只需要打开终端，输入以下命令：
npm install -g sencha
这里的 -g 参数表示全局安装，即该命令行工具将在全局可执行环境中安装。安装完成后，我们可以通过 sencha 命令检查安装结果：
sencha
如果出现如下结果，则说明安装成功：
Sencha Cmd v6.7.0.63
注意，执行该命令需要先安装 Java 和 Node.js 环境，因此需要提前安装好这两个环境。
使用 sencha-cli
创建项目
使用 sencha-cli 创建项目非常简单。在终端中输入以下命令：
sencha generate app MyApp ./MyApp
其中，MyApp 表示项目名称，路径为当前终端的工作目录下的 ./MyApp，可以根据实际情况修改。运行该命令后，sencha-cli 会依据默认模板自动创建基本的项目结构。
运行项目
创建完成后，我们可以使用另一个命令在浏览器中查看项目效果：
sencha app watch
执行该命令后，终端会进入监听模式，随着代码的更新，自动刷新浏览器。此时打开浏览器，输入 http://localhost:1841，即可查看项目效果。
打包项目
当项目开发完毕后，我们需要将其打包压缩，以便在生产环境中使用。使用 sencha-cli 打包非常简单，只需要在项目根目录下执行以下命令：
sencha app build production
该命令会生成一个名为 build 的目录，其中包含了所有打包后的文件。如果一切正常，即可将这些文件上传到服务器上，供使用者访问。
示例代码
本文为了更好地演示 sencha-cli 的使用方法，这里提供一个简单的 Ext JS 示例代码，读者可拷贝使用。该代码展现了一个简单的数据表格，并支持搜索和自定义排序。
-- -------------------- ---- -------
---------------------------------- -
------- --------------------------
------ -----------
--------- -
-------------
-------------
-------------
---------------------
--------------------------
----------------------
----------------------------
--
----------- -------
---------- -
----- ------
--
------- -
----- --------
--
------ --
------- -------
------ --------
------ -----
--- --------------
------ ----- -------
------ ----
--------- ----
--------- ----
------------ -----
------------- -----
------- ------------
------ --
------ -------------
------- ------
-------- ----- ------------
------ --
------ ------------
------------ ------
------- ------
------ ------
----------- -----
---------- -----
----------- -
---------- -
------- -------------- -
-------- - ----------------------------- -
--------- ------------------
----------- -----
--------- --------------
---------- -
----------- -------- ------------------ -
-- ------------------------------------- -
------ ------
-
-----------------------------------------------------------
-
-
---
-
-
--
----- -------------------------------- -
----- -
----- -------
--------- -----
--------- --
----- -------
----- -----
-------- ----- ---------
----- -------- --- -----
-- -
----- ----------
----- -----
-------- ----- ---------------
----- -------- --- --------
-- -
----- -----------
--------- -----
-------- ----- --------
--------- --
----- --------
----- -----
-------- ----- ---------
----- -------- --- ------
-- -
----- --------
----- -----
-------- ----- ----------
----- -------- --- ------
--
--
-
--
--
-- -
------ -----------
----- ------------- ---------
--
-- -
------- ---------
------ ------------
--------- -----
-----------------
-------------
--------
-
------- ------------
------- ---------------------
------- ---------------
--
------
------- -------- --- --------------- ----- ----- --- ------- ------ ------------- -------
------- -------- --- --------------- ------ ---- --- --- ----- --------- ------ ------------------ ------------- --------
----
------- ------------------ -------- --------
------- ------------------ -------- ---------
--
---------
--------------------------------------------------------------- ------------ --------- -------
------------------------------------------------------------------------------------------------------------- --------- -------
---------------- ---------------------------------------- ------- ------------ --------- -------
-------------- -------- ---------------------------------------------- ------- ------------ --------- ------
--
-------- -----------
----- -
------ ---------
--
---------- -
------------- -------------------
--
------------ --
------ ----------------
----- ---------
------- ----------------
------------ -----
--------- --- ---- -- ---------
----- -
------ ---------
-
--
--
---
总结
本文详细介绍了 npm 包 sencha-cli 的安装及使用方法，并提供了一个简单的案例演示其自动化构建工具的效果。希望读者可以通过本文更好地掌握该工具的使用方法，并在以后的实际开发中获得更好的效率和体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bd981e8991b448d97c2
