从渲染器进程加载的HTML文件中，我们可以像在传统的基于浏览器的web应用程序中一样加载可能需要的任何其他文件－即<script>和<link>标签。
Electron与我们习惯的浏览器不同之处在于我们可以访问所有Node——甚至是我们通常认为的“客户端”。这意味着，我们可以使用require甚至Node-only对象和变量，比如_dirname或process模块。同时，我们还有所有可用的浏览器APIs。只能在客户端的工作和只能在服务端做的工作的分工开始消失不见。
图2.6 一个带有简单HTML文档的浏览器窗口
让我们来看看实际情况。在传统的浏览器环境中_dirname不可用，在Node中document或alert是不可用的。但在Electron，我们可以无缝地将它们结合在一起。让我们在页面上添加一个按钮。
列表2.7 添加一个按钮到HTML文档: ./app/index. html
<!DOCTYPE html> <html> <head> <meta charset="UTF+8"> <meta http+equiv="Content+Security+Policy" content=" default+src 'self'; script+src 'self' 'unsafe+inline';connect+src *"> <meta content="width=device+width,initial+scale=1"> <title>Bookmarker</title> </head> <body> <h1>Hello from Electron</h1> <p> <button>Current Directory</button> <---+ </p> |这是我们 </body> |的新按钮 </html> +
现在，我们已经有了按钮，让我们添加一个事件监听器，它将提醒我们运行应用程序的当前目录。
<script> const button = document.querySelector('.alert'); button.addEventListener('click', () =^ { alert(__dirname); <------+单击按钮时， }); |使用浏览器警告显示 </script> |Node全局变量 +alert()仅在浏览器中可用。_dirname仅在Node中可用。当我们点击按钮时，我们被处理成Node和Chromium在一起工作，甜美和谐，如图2.7所示。
图2.7 在渲染器进程的上下文中,BrowserWindow执行JavaScript。
在渲染器进程中引用文件
在HTML文件中编写代码显然有效，但是不难想象，我们的代码量可能会增长到这种方法不再可行的地步。我们可以添加带有src属性的脚本标记来引用其他文件，但是这很快就会变得很麻烦。
这就是web开发变得棘手的地方。虽然模块被添加到ECMAScript规范中，目前没有浏览器具有模块系统的工作实现。在客户端上，我们可以考虑使用一些构建工具，如Browserify ()或模块bundler、webpack，也可以使用任务运行器，如Gulp或Grunt。
我们可以使用Node的模块系统，而不需要额外的配置。让我们移除<script>标签中的所有代码到－现在是空的－app/renderer.js文件中。现在我们可以用一个<script>标记去引用renderer.js文件去替代之前的内容。
列表2.9 从renderer.js加载JavaScript: ./app/index.html
+ <script> |使用Node的require函数 require('./renderer'); <--+将额外的JavaScript模块 </script> |加载到渲染器进程中 +