Question

我无法处理何时使用 require（'jslib'）与＆lt; script src =“”＆gt;＆lt; / script＆gt; in电子内容页面（例如index.html）。使用jQuery，我发现它需要按如下方式加载：

＆＃xA;＆＃xA;

 ＆lt; script＆gt; window。$ = window.jQuery = require（'./ js /jquery-2.2.4.min.js');</script>

我需要开始使用其他一些库（例如Handlebars，ds3.js，Bootstrap等）我不确定是否应该使用＆lt; script＆gt; 标签加载那些或者我应该 require

＆＃XA;

Answer 1

某些库仅通过CommonJS接口公开其变量。 jQuery之类的其他人也将它们公开为全局变量。

您不能仅对仅通过CommonJS公开的库执行<script src="..."></script>的原因是它不会绑定到全局空间。

与CommonJS绑定

module.exports = myLibrary;

绑定到全局范围

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>

TL; DR

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

Answer 2

在使用模块捆绑器之前，必须通过<script>标签或通过模块加载器（例如RequireJS）导入库。

现在，假设使用CommonJS环境并通过模块捆绑器获取所有内容会更容易，该模块捆绑器将在浏览器上下文中为您提供require函数。

在电子应用程序的上下文中，所有这些都是不必要的：

在普通浏览器中，网页通常在沙盒环境中运行，并且不允许访问本机资源。电子用户可以在网页中使用Node.js API，从而允许较低级别的操作系统交互。

CF。 renderer process

这意味着原生Node.js require函数（以及其他功能）在渲染器过程中可用！

这是一个简单的电子应用程序来证明这一点：

我的package.json：

{
  "name": "foobar",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^3.0.7"
  },
  "dependencies": {
    "the-answer": "^1.0.0"
  }
}

我的main.js ：（主要过程）

const {app, BrowserWindow} = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);

我的index.html ：（渲染过程）

<!DOCTYPE html>
<html>
  <body>
    <script>
      const os = require('os'); // Standard Node.js module
      const answer= require('the-answer'); // An NPM package that returns the answer to everything.
    </script>
    <button onclick="alert(os.platform())">YOUR PLATFORM</button>
    <button onclick="alert(answer)">THE ANSWER</button>
  </body>
</html>

那您应该使用哪种方法？

Electron公开了本机Node.js require函数。不使用它会很可惜：您可以按名称要求软件包，并像在任何Node.js应用程序中一样将代码拆分为可重用的模块。

在Electron应用程序中使用require（lib）与<script>

2 个答案: