Skip to content

Instantly share code, notes, and snippets.

@mfdeveloper
Created December 8, 2019 15:46
Show Gist options
  • Save mfdeveloper/9e0153fe08e1a56af74135e1190d2c64 to your computer and use it in GitHub Desktop.
Save mfdeveloper/9e0153fe08e1a56af74135e1190d2c64 to your computer and use it in GitHub Desktop.
Webpack: How to load non module scripts into global scope | window
// Import or require the module to includes global variables from the lib
import "p5.scenemanager"
// Use the lib
function myFunction() {
var manager = new window.SceneManager();
}
{
"script-loader": "^0.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
}
/*
* Uses 'script-loader' npm package to add a JS dependency from node_modules to "window"
*
* Obs: Using webpack >= 4.0
*
* @see https://medium.com/@yushulx/react-load-global-javascript-library-with-webpack-fa3e1a33d8bc
* @see https://webpack.js.org/guides/shimming/
* @see https://stackoverflow.com/questions/48998102/webpack-how-to-load-non-module-scripts-into-global-scope-window
* @see https://webpack.js.org/configuration/externals/
*/
module.exports = {
entry: path.resolve(__dirname, 'index.js'),
module: {
rules: [
{
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js$/
},
{
test: /\.js$/,
include: path.resolve(__dirname, 'node_modules', 'p5.scenemanager'),
use: [ 'script-loader' ]
}
],
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment