Using a script that exposes a global var in a Webpack build - javascript

In my (first) Webpack build I'm having trouble comprehending how I should be loading a script that simply exposes a global var.
The script I'm trying to load is basically something like this:
//File: MyLibrary.js
var MyLibrary = (function(window) {
function MyLibrary() {
// Do librarious stuff
}
return MyLibrary;
})(typeof window !== 'undefined' ? window : null);
I figured I should use the exports-loader since according to the docs it should be just the thing for this case:
The file sets a variable in the global context with var XModule = ....
var XModule = require("exports?XModule!./file.js")
So I put this in my config:
module: {
loaders: [
{
test: /MyLibrary\.js$/,
loader: "exports?MyLibrary!./MyLibrary.js"
}
]
}
But this results in an error:
ERROR in Loader MyLibrary.js didn't return a function
which confuses me, since it's not supposed to return a function, that's the whole point why I'm using this particular loader...
So how should I load the script?

you don't specify the path to the library in loader property, simply:
module: {
loaders: [
{
test: /MyLibrary\.js$/,
loader: "exports?MyLibrary"
}
]
}

Related

How to access DOM from webpack loader

I'm writing a webpack loader for a specific file extension, and I would like to append a custom import to the DOM
module.exports = function(source) {
...
document.appendChild(myImport)
return `export default 'hello'`;
}
but the DOM is not accessible
ReferenceError: document is not defined
Is there a way to access the DOM from my loader?
My webpack configuration is:
const path = require('path')
module.exports = {
...
module: {
rules: [{
test: /\.myextension$/,
use: {
loader: 'my-loader'
}
}]
}
};
No, the code from loader is going to be ran on a node.js env, which has no power over the dom (browser env). To be able to manipulate the dom, you would have to output a code though loader which would be inserted on that type of file and then when executed on the browser it would do the modifications.
Something like:
module.exports = function(source) {
return `export default function(){
document.appendChild(myImport)
}`;
}

How can I use a static helper function(javascript) in SCSS to set the base url for images for different environments?

In my SCSS file I need to use different base urls for different app environments which will be prepended to the image name.
Example:
For production environment
background: url(/prod/image.png);
For development environment
background: url(/dev/image.png);
The helper function which I'm using in the rest of my app returns the base path of the static assets and it looks like this:
static imagePath() {
let imagesPath;
if (this.isProduction()) {
basePath = '/prod';
} else {
basePath = '/dev';
}
return basePath
}
How to achieve this?
Edit:*
I'm using extract-text-webpack-plugin which won't let me output multiple css files.
For example you can have 2 main files (dev.scss and prod.scss) that will look like:
// prod.scss
$basePath: '/prod';
#import "style.scss";
and same for dev.scss.
Otherwise you can use some placeholder for path prefix and substitute it with actual prefix on post-processing step. For example you can use this plugin for PostCSS.
UPDATE:
Following discussion in comments here is (untested) example of how webpack configuration may look like:
module.exports = {
// ....
module: {
rules: [
// ....
{
test: /\.scss$/,
use: {
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /{urlPrefix}/ig,
replacement: () => process.env.NODE_ENV !== 'production' ? '/dev' : '/prod',
}
]
}, 'sass-loader'),
}
},
// ....
],
},
plugins: [
new StringReplacePlugin(),
// ....
],
// ....
};

How to expose an es6 module globally

I need to write a module that will be available on the window global.
I'm using es6 to create the module and every single class I define has it's own file.
I'm using webpack to babelify and bundle these classes.
The entry point of my module is also the file containing the global to be exposed.
I've tried every method to make this possibe, icluding:
expose-loader
import-loader
expoert-loader
output: library
black-magic :(
Example of code I've tried:
I want to get: window.MyMod
// mymod.js
export class MyMod {
constructor(aaa) {
this.aaa = aaa;
}
toString() {
return this.aaa;
}
}
// webpack.config
var entries = [
'./src/mymod.js'
];
module.exports = {
...,
module: {
loaders: [
{
test: require.resolve('./src/mymod.js'),
loader: 'expose?MyMod'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
This only gets me an object MyMod on the window that contains MyMod as a constructor.
Any help will be appreciated.
You should combine export default class Foo with the library and libraryTarget settings in Webpack's config. Something like:
// src/Foo.js
export default class Foo { ... }
// webpack.config.json
{
"output": {
"library": "Foo",
"libraryTarget": "var"
}
}
You should be able to use the library as window.Foo once the bundle has been loaded.
This is basically the same issue as Exporting a class with Webpack and Babel not working , except that you have a named export instead of a default export. Your entry file should be
import {MyMod} from './mymod';
module.exports = MyMod;
or
module.exports = require('./mymod').MyMod;
If you don't want to do any of these and keep './src/mymod.js' as entry file, use a CommonJS export instead of an ES6 export in that file:
// mymod.js
exports.MyMod = class MyMod {
constructor(aaa) {
this.aaa = aaa;
}
toString() {
return this.aaa;
}
}

New Class from IIFE function now working with webpack

So i have this function. I am trying to get a new Test('selector', {}) from outside this js file, it comes undefined and i can't seem to figure out why.
Do i really need to attach it to the window object ?
Can someone explain this ?
TO mention it works from the same file.
let Test = ((window, document, undefined) => {
class test {
constructor(selector, options) {
this.selector = document.querySelector(selector);
this.options = options;
}
}
return test;
})(window, document);
This is my webpack config file:
module.exports = {
entry: './src/test.js',
module: {
loaders: [
{
test: /\.js?$/,
exclude: / (node_modules) /,
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0']
}
}
]
},
output: {
path: __dirname + '/src',
filename: 'test.min.js'
}
}
I was clearly misunderstanding what webpack is doing. Webpack turns all your JavaScript files into modules that are not available in the global namespace. That's why we need to use require/import to load them in. In the above example the Test function was never loaded in and is not defined. The default scoping nature of JavaScript no longer exists.

Configure webpack to ignore define statement

How can I confgure webpack to ignore amd 'define' statements in the file, like I can do it with 'require' with externals option?
as stated here: https://github.com/webpack/webpack/issues/3017#issuecomment-285954512
you could do:
module: {
rules: [
{ parser: { amd: false } }
]
}
Officially it is recommended to set define to false with imports-loader.
loaders: [
{ test: /\.js/, loader: 'imports?define=>false'}
]
But it is useful only if define is called in UMD style - something like this:
if (typeof define === 'function' && define.amd) {
define([], factory)
}
If you can change code that calls define and there is no UMD's if this is what worked for me:
var define = window['infor']; // keep webpack out of way
// use define from global scope (requirejs or other used loader) as needed
define('mymodule', ['dep1'], function (dep1) {
return {}
});

Categories