介绍
enb-ng-techs 是一款针对 AngularJS 项目打包的 ENB 技术集合，使用此技术集合，可以在 ENB 的平台之上，通过模板引擎、RequireJS、uglify.js 等模块，将 AngularJS 的模板和 JS 打包成静态 HTML，并进行压缩和混淆等处理，使得 AngularJS 应用在生产环境下获得更好的性能和体验。
安装
前置条件
- Node.js
- npm
- ENB
安装方式
使用 npm 进行安装：
npm install enb-ng-techs
使用
enb-ng-techs 的使用分为两步：配置 enb-ng-techs 参数、在 ENB 的配置文件中调用 enb-ng-techs。
配置 enb-ng-techs 参数
在工程目录下，创建 .enb-make.js 文件，并将以下代码复制到文件中：
-- -------------------- ---- -------
--- ----- - ------------------------
-------------- - ---------------- -
------------------------- -------------------- -
---------------------
-- ----
--------------- -- ---- ----
------------ --------------- -------------- ------------- ----- --- -- -- ----
--------------- -- --------
-- -----
--------------------- -- ---- -----
------------------- -- -- -----
------------------- -- ---- ----
----------------- -- -- ----
-- ----
--------------- -- ------
--------------- -- ------
---
---
-------------------------------------
--在这个配置文件中，我们配置了 enb-ng-techs 的核心技术和其他技术，其中核心技术包括 ngHtml、ngJs 和 ngText，分别用于打包 HTML、JS 和模板文件，其他技术包括 beautifyHtml、beautifyJs、minifyHtml、minifyJs、ngFont 和 ngImage，分别用于美化和压缩 HTML 和 JS 文件、打包字体和图片。
注意：以上参数仅供参考，具体参数需要根据项目实际情况进行调整。
在 ENB 的配置文件中调用 enb-ng-techs
在工程目录下，找到 ENB 的配置文件（一般为 .bem/enb-make.js），并将以下代码复制到文件中：
var make = require('enb/lib/make');
var ngTechs = require('enb-ng-techs');
make.builders.unshift(ngTechs.getTechModule('enb'));
make.initConfig(require('./config'));
make([targets]); // targets 中填写需要 build 的目标，可以是一个或多个在这个配置文件中，我们调用了 enb-ng-techs，通过 getTechModule 获取了 enb-ng-techs 的实例，并注册到 enb 的构建列表中。然后，通过 make 方法来调用 ENB 进行打包。
示例代码
工程目录结构如下：
-- -------------------- ---- ------- - -- ----- - -- ----------- -- -------- - -- ----- - - -- ------- - - -- --------- - - -- ------------- -- ----- - -- ---------- - -- ---------- -- ------------- -- -------
test.js：
define(['angular'], function(angular) {
var app = angular.module('TestApp', []);
app.controller('TestController', ['$scope', function($scope) {
$scope.name = 'World';
}]);
});test.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
----- -----------------
---- -------------------------------
---------- --------------
------
-------
-------test.tpl.html：
<div>
This is a template!
</div>.bem/enb-make.js：
-- -------------------- ---- -------
--- ----- - ------------------------
-------------- - ---------------- -
------------------------- -------------------- -
---------------------
---------------
------------ --------------- -------------- ------------- ----- ---
---------------
---------------------
-------------------
-------------------
-----------------
---------------
---------------
---
-----------------------
---------
-------
-------------
----------
---
---
-------------------------------------
--.bem/enb-make.js：
var make = require('enb/lib/make');
var ngTechs = require('enb-ng-techs');
make.builders.unshift(ngTechs.getTechModule('enb'));
make.initConfig(require('./config'));
make(['bundles/test/test.html', 'bundles/test/test.js', 'bundles/test/test.min.html', 'bundles/test/test.min.js']);打包完成后，将在 ./bundles/test/ 目录下生成 test.html、test.js、test.min.html 和 test.min.js 四个文件。将这四个文件放入 ./static/ 目录下，并创建 index.html 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
------- ---------------- ---------------------------------
-------
-------然后在浏览器中打开 ./static/index.html，查看效果。如果一切正常，页面应该输出 Hello, World! This is a template!。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1fa563576b7b1ecd88