admin管理员组文章数量:1327661
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.
-
1
It all depends on the library. If the library can be exposed through CommonJS (
module.exports = ...
) then you will have torequire
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 userequire
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 erequire
works in general then? This question deserves an answer... – bluenote10 Commented Jan 23, 2019 at 7:48
2 Answers
Reset to default 4 +50Some 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
版权声明:本文标题:javascript - Use of require(lib) versus <script> in Electron apps - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742228192a2436720.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论