javascript - Use of require(lib) versus <script> in Electron apps - Stack Overflow

admin管理员组

文章数量:1332628

I don't have a handle on when to use require('jslib') versus <script src=""></script> in Electron content pages (e.g. index.html). With jQuery, I discovered that it needs to be loaded as follows:

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

I need to start using some other libraries (e.g. Handlebars, ds3.js, Bootstrap, etc.) and I am not sure if I should be loading those with the <script> tag or if I should require them.

I don't have a handle on when to use require('jslib') versus <script src=""></script> in Electron content pages (e.g. index.html). With jQuery, I discovered that it needs to be loaded as follows:

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

I need to start using some other libraries (e.g. Handlebars, ds3.js, Bootstrap, etc.) and I am not sure if I should be loading those with the <script> tag or if I should require them.

• javascript
• node.js
• require
• electron

Share Improve this question Follow asked Jun 9, 2016 at 21:56 Web UserWeb User 7,7461515 gold badges7070 silver badges101101 bronze badges 4

• 1 It all depends on the library. If the library can be exposed through CommonJS (module.exports = ...) then you will have to require it. Otherwise, a simple <script src="..."></script> will do. – Mike Cluck Commented Jun 9, 2016 at 22:00
• @MikeC It appears that require works even if a JS script file does not utilize CommonJS. Does that mean that I can generally use require in place of <script src="..."></script>? Even though I ask that question, I think I should be looking inside a JS file to determine when to use one or the other. – Web User Commented Jun 9, 2016 at 22:06
• 1 In general, you could get away with that, yes. – Mike Cluck Commented Jun 9, 2016 at 22:07
• @MikeCluck Why do you say you will have to require it if it is exposed through CommonJS? Shouldn't <script src="..."></script> still work? And how e require works in general then? This question deserves an answer... – bluenote10 Commented Jan 23, 2019 at 7:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

Some libraries only expose their variables through a CommonJS interface. Others, like jQuery, will also expose them as global variables.

The reason you can't just do <script src="..."></script> for a library that only exposes through CommonJS is that it won't bind to the global space.

Binding with CommonJS

module.exports = myLibrary;

Bindings to the global scope

window.myLibrary = myLibrary;

If a library only does the former then you will not be able to access the value without using require. If a library only does the latter, then you will not be able to access it with require in the sense of const myLibrary = require('my-library')

In general, it's a better idea to use CommonJS over global variables. Adding variables to the global scope can lead to name collisions and directly loading in your dependencies makes it easier for the next person to tell where that dependency came from. Not to mention, CommonJS allows static analysis tools to work better so you're more likely to get relevant code pletions and type definitions.

Using the example of jQuery, it would be better to use it like this.

// 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

Use require('my-library') when possible, load them as globals when it is not.

Before module bundlers, libraries would have to be imported either via a <script> tag or via module loaders such as RequireJS.

Now it's easier to assume a CommonJS environment and get everything through a module bundler which will expose a require function for you in a browser context.

All of this is not necessary in the context of an Electron app:

In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions.

Cf. renderer process

That means that the native Node.js require function (amongst other things) is available in your renderer process!

Here's a simple Electron app to prove it:

My 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"
  }
}

My main.js: (the main process)

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

let mainWindow;

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

app.on('ready', createWindow);

My index.html: (the renderer process)

<!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>

So which method should you use?

Electron exposes the native Node.js require function. It would be a shame not to leverage this: you would be able to require packages by their names and split your code into reusable modules as you would do in any Node.js apps.

本文标签： javascriptUse of require(lib) versus ltscriptgt in Electron appsStack Overflow