介绍
atpl-loader 是一个可以将 atpl 模板编译成可执行的 JavaScript 函数，并集成到 webpack 中的 npm 包。atpl 模板是类似 Django 模板的模板语言。
安装
npm install atpl-loader --save-dev
使用
1.在 webpack.config.js 中添加 atpl-loader 配置
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
------- -------------
-
-
-
-
--2.在需要使用 atpl 模板的 js 文件中引入模板
-- -------------------- ---- ------- ------ --- ---- -------------------- --- ------- - - ----- ------- - --- ---- - ------------- ----------------------- - -----
高级使用
添加模板搜索路径
可以在 atpl-loader 配置中添加模板搜索路径，这里以 src 目录为例：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
------- --------------
---------
----- -----
-
-
-
-
-
--这样在引入模板时，就可以不用写相对路径了：
import tpl from 'tpl/example.tpl';
注入变量
在 webpack 配置中，可以添加 atpl-loader 的 options 选项，可以在所有模板中注入某个变量。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
------- --------------
---------
------- -
---- -----
-
-
-
-
-
-
--这样在模板中就可以直接使用注入的变量：
<div>{{foo}}</div>使用标籤
atpl-loader 默认使用 <% ... %> 标记 JavaScript 代码，使用 {{ ... }} 标记变量，可以在 options 中设置使用不同的标记：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
------- --------------
---------
---- -
--------- --------
------------ --- ----
--------- --- ---
-
-
-
-
-
-
--这样在模板中就可以使用新的标记：
<div><$=$>foo<$=$></div>
示例代码
webpack.config.js
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
------- --------------
---------
----- ------
------- -
------ ------ ------
--
---- -
--------- --------
------------ --- ----
--------- --- ---
-
-
-
-
-
-
--src/tpl/example.tpl
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------------ ------- ------ ------- -------- -------- ------------------------ ------- ----------------------- ------- -------
src/main.js
-- -------------------- ---- ------- ------ --- ---- ------------------ --- ------- - - ----- ------- - --- ---- - ------------- ----------------------- - -----
总结
atpl-loader 是一个非常方便的模板编译工具，在 webpack 中使用它可以让我们省去手动写模板的繁琐过程，实现前后端分离，提高开发效率。在使用时可以根据业务需求自由配置，扩展其功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70875