I've written an ES6 module that looks something like this:
export default function({makeCurrentVerUrl, verUrl, fileServer, downloadTokenType, appId}) {
...
}
When compiled by webpack, it looks something like this:
webpackJsonp([5,7],[
/* 0 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = function (_ref) {
var makeCurrentVerUrl = _ref.makeCurrentVerUrl;
var verUrl = _ref.verUrl;
var fileServer = _ref.fileServer;
var downloadTokenType = _ref.downloadTokenType;
var appId = _ref.appId;
...
};
/***/ }
]);
Which is great, but I'm not sure how to run this file and call my default function.
I can include it,
<script src="/path/to/script.js"></script>
Which I believe will run it automatically, but how can I call the functions I've defined in it from the browser? require
is not defined in my browser.
To run the local installation of webpack you can access its binary version as node_modules/. bin/webpack . Alternatively, if you are using npm v5. 2.0 or greater, you can run npx webpack to do it.
Bundling JavaScript the Webpack way You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.
We can add webpack to npm scripts in package. json so as to ease our development process. Add "build": "webpack", to package. json and run the command npm run build .
You can set output.library
in the configuration. From the docs:
output.library
If set, export the bundle as library.output.library
is the name.Use this, if you are writing a library and want to publish it as single file.
output.libraryTarget
Which format to export the library:
"var"
- Export by setting a variable:var Library = xxx
(default)
"this"
- Export by setting a property of this:this["Library"] = xxx
"commonjs"
- Export by setting a property of exports:exports["Library"] = xxx
"commonjs2"
- Export by setting module.exports:module.exports = xxx
"amd"
- Export to AMD (optionally named)
"umd"
- Export to AMD, CommonJS2 or as property in rootDefault:
"var"
Then you will be able to do
myLibrary()
So the easiest way to do this without changing output.library
(assuming you don't want to globalize everything) is to just attach your needed functions to the window
. e.g.
// entry-point.js
import foo from './scripts/foo.js';
window.foo = foo;
Or if you want to attach a whole bunch of stuff to the window
(not just default
), you can do something like:
Object.assign(window, require('./scripts/somelib.js'));
You can also take a look at bundle-loader
, the built-in webpack feature require.context
or dynamic import()
s if you want to include some scripts at run-time.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With