在前端开发中，使用最广泛的构建工具是 Webpack 或者 Rollup.js，通过配置这些构建工具，将各种前端资源进行打包、压缩混淆、代码切割等一系列复杂的操作，以最小化文件大小、提高页面加载速度。在这个过程中，通常会使用到 Babel 进行代码转换，以支持更多的 JavaScript 特性。
但是，当我们需要将编译后的 JavaScript 代码用于动态渲染网页的场景下，我们通常需要将 JavaScript 代码打包成字符串，并在页面中使用 eval 函数执行这个字符串。为了便于进行这个操作，有一个非常好用的 npm 包，名叫 prender-babel。
prender-babel 是一个将 JavaScript 代码编译为字符串并支持动态渲染的 npm 包。它对 Babel 进行了封装，使得我们可以快速地将 JavaScript 代码编译为字符串，并且可以直接在浏览器中使用 eval 函数执行编译后的字符串。下面我们来一步步学习如何使用。
安装 prender-babel
你可以在终端中使用 npm 安装：
npm install prender-babel --save-dev
使用 prender-babel
首先，我们需要使用 prender-babel 编译 JavaScript 代码，并将它们打包成字符串：
-- -------------------- ---- ------- ----- ------------ - ------------------------- ----- -------------- - - ----- --- - --- -- -- - - -- ------------------- ---- -- ----- ------------ - ----------------------------- ---------------------------
输出结果为：
'const add = function (a, b) { return a + b; };console.info(add(1, 2));'注意事项：
- 在编译 JavaScript 代码时，请确保使用的 babel 配置文件在项目根目录下，并且名为
.babelrc或者babel.config.js。
经过编译后，我们得到了一个字符串，可以直接在浏览器中使用 eval 函数执行它。例如：
<body>
<div id="result"></div>
<script>
const compiledCode = 'const add = function (a, b) { return a + b; };console.info(add(1, 2));';
eval(compiledCode);
</script>
</body>此时在控制台中打印出了 3。
使用 prender-babel 嵌入模板引擎
prender-babel 还支持将编译后的字符串嵌入到模板引擎中，以动态渲染页面。 在本教程中，我们使用 ejs 模板引擎作为示例。
-- -------------------- ---- ------- -- -------- ----- ------------ - ------------------------- ----- --- - --------------- ----- -- - -------------- ----- -------- - --------------------------------- --------- ----- -------------- - - ----- --- - --- -- -- - - -- ----- ------ - ------ --- --------------------- -- ----- ------------ - ----------------------------- ----- ---- - -------------------- - ------------ --- -------------------------------- ----- ---------
-- -------------------- ---- -------
---- ------------ ---
--------- -----
------
------
-------------------- ------------
-------
------
---- ------------------
--------
--------- ------------ -----
---------
-------
-------在模板中，我们通过 eval 函数执行编译后的字符串。执行编译后的 JavaScript 代码，结果会输出到控制台。我们可以通过浏览器访问 index.html，打开控制台查看效果。
总结
在前端工程化的过程中，构建工具和 Babel 非常常用。而 prender-babel 将这些工具结合起来，对于一些需要动态生成 JavaScript 代码的场景，可以大大简化开发者的工作量，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005516281e8991b448ce8b1