javascript - 在 Electron 应用程序中使用 require(lib) 与 <script>

Question

我不知道何时使用 require('jslib')与 <script src=""></script>在 Electron 内容页面中(例如 index.html)。使用 jQuery，我发现它需要按如下方式加载:

<script>window.$ = window.jQuery = require('./js/jquery-2.2.4.min.js');</script>

我需要开始使用其他一些库(例如 Handlebars、ds3.js、Bootstrap 等)，我不确定是否应该使用 <script> 加载这些库标签或者我是否应该require他们。

Answer 1

一些库只通过 CommonJS 接口(interface)公开它们的变量。其他人，如 jQuery，也会将它们公开为全局变量。

你不能只做的原因 <script src="..."></script>对于仅通过 CommonJS 公开的库，它不会绑定(bind)到全局空间。

与 CommonJS 绑定(bind)

module.exports = myLibrary;

绑定(bind)到全局范围

window.myLibrary = myLibrary;

如果库只做前者，那么不使用 require 将无法访问该值.如果图书馆只做后者，那么您将不能使用require 访问它。在const myLibrary = require('my-library')的意义上

一般来说，使用 CommonJS 而不是全局变量是更好的主意。将变量添加到全局范围可能会导致名称冲突，而直接加载您的依赖项会使下一个人更容易分辨出该依赖项的来源。更不用说，CommonJS 允许静态分析工具更好地工作，因此您更有可能获得相关的代码完成和类型定义。

以jQuery为例，这样用比较好

// main.js
const $ = require('./js/jquery-2.2.4.min.js');
// could also be done like this if you install it as a Node dependency
// const $ = require('jquery');

$(document).ready(...);

---

<!-- index.html -->
...
<script src="main.js"></script>

长话短说

使用 require('my-library')在可能的情况下，将它们加载为全局变量。