Two useful tips if you are using webpack and require
If you are using webpack and outputing your bundle(s) into amd modules, then these two tips might help you.
The “non_webpack_require” module variable
If you need to use the global require variable because you really need to request something dynamically and it cannot be done statically with webpack, then this is your variable.
Once I had to deal with the require-i18n plugin, and I had a code with something like:
const msgs = require('ojL10n!messages/nls/my-app'); // <- webpack doesn't like this
function getMsg() {
return msgs.MY_MSG; // will pick the msg for the current language
}
And in the beginning I had to take that dependency and make it external. But now there’s a better way, you can use the magic variable, like this:
const msgs = __non_webpack_require__('ojL10n!messages/nls/my-app'); // <- webpack it's ok with this
function getMsg() {
return msgs.MY_MSG;
}
Another example could be some complex logic to know what to require:
const values = ['banana','apple','melon','apple']
const choice = await getUserChoices()
require(choices.find(c -> c.match(/apple/))) // nonsense logic I know, and webpack doesn't like it
Swapping it for the variable:
const values = ['banana','apple','melon','apple']
const choice = await getUserChoices()
__non_webpack_require__(choices.find(c -> c.match(/apple/)))
After the bundle is done, webpack will replace those variables with require, so your global variable should be used there.
Bundle output “libraryTarget: ‘amd-require’”
Is your bundle being loaded with something like the following pattern?
<html>
<!-- ... -->
<script src="require.js"></script>
<script src="my_wp_bundle.js"></script>
<script>
require("my_wp_bundle", function(bundle) {
console.log("Bundle loaded!")
});
</script>
</html>
With the new libraryTarget amd-require you can know skip the last script, because webpack will add the require(...) part for you in the bundle directly!
Hope the tips help, Cheers!