I have two files, main.js and script.js.
Using webpack, I want to make MyLibrary function available in script.js, so I can use it like this:
main.js:
function MyLibrary() {
this.VERSION = '0.0.1';
this.AUTHOR = 'John Smith';
this.getAuthor = function() {
return this.AUTHOR;
};
return this;
};
module.exports = new MyLibrary();
And script.js:
console.log( MyLibrary );
But this doesn't work.
Bear in mind, I don't want to use the require() function. I need this variable to be available inside script.js, but not in the global scope.
Here's my webpack config:
{
entry: {
main: 'main.js',
script: 'script.js'
},
output: {
filename: 'compiled.js'
}
}
Any ideas how can I achieve this?
Related
I have experience in Javascript and jQuery, but I am new to webpack.
I have a file called test1.js:
exports.func1 = function() {
window.alert('hello from func 1');
};
I then have index.js, which contains the following:
import test1 from "./test1"
My webpack.config.js contains:
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist'), //folder to put the output file
},
};
I have included app.js into my webpage and that is fine, no errors in console about file cannot be found. I want to call func1() from a button click, for example, <button onclick="func1()">Test</button>.
When I do this I get "func1 is not defined" in console output. Webpack doesn't show any errors when I run it, so it must be the way I am calling the function somehow.
I must be doing something, or not doing something, really stupid. Can someone help as I seem to be going round in circles? Thanks.
It's because test1 is the exported object. func1 is a property of test1.
test1.func1() will invoke the function
You could also import it by destructuring. Try the following:
import { func1 } from './test1'
Change test1.js to:
export default () => {
window.alert('hello from func 1');
};
Then in your index.js:
export { default as test1 } from "./test1"
If you want to consume in HTML you should build a library and update your webpack like below:
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist'), //folder to put the output file
library: 'myApp',
libraryTarget: 'umd',
},
};
Now your function is exported and should be available for usage.
I'm trying to get rollup, commonjs, es6 and tree shaking working correctly.
Currently, I have the following build script:
'use strict';
const rollup = require('rollup');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
rollup.rollup({
input: 'main.js',
format: 'iife',
plugins: [
{
transform(code, id) {
return code;
}
},
resolve({
extensions: ['.js', '.jsx']
}),
commonjs({
extensions: ['.js', '.jsx']
})
]
})
.then(({ generate }) => generate({
format: 'iife',
name: 'test',
}))
.then(({ code }) => console.log(code));
which loads the following main.js file
const { firstFunction } = require('./exports');
firstFunction();
and the export.js file
export function firstFunction() {
return this.name;
}
export function secondFunction() {
return this.name;
}
outputs the following:
var test = (function () {
'use strict';
function firstFunction$1() {
return this.name;
}
function secondFunction() {
return this.name;
}
var exports$1 = Object.freeze({
firstFunction: firstFunction$1,
secondFunction: secondFunction
});
var require$$0 = ( exports$1 && undefined ) || exports$1;
const { firstFunction } = require$$0;
firstFunction();
var main = {
};
return main;
}());
I am unsure if this is the correct behaviour, I was assuming that I would be able to use tree-shaking with the es6 export.js file and therefore not need to import the secondFunction() from export.js in our bundled code.
I have tried a number of combinations of settings but nothing seems to be able to get tree-shaking to work.
It's worth noting that I'm using commonjs on the server and trying to use the same file bundled on the client - this is why I have a mix of cjs and es6.
As stated by Lux in comments, the problem is you're mixing cjs and ES modules. It seems the rollup-plugin-commonjs does not treeshake the imports.
You should first bundle your files with rollup and use cjs as output format. You then require the bundle.
That should get your javascript treeshaken and ready for node.
I intend to bundle all my .js using webpack.
I tried with a very simple example as following.
Function to bundle in a test.js file :
function test() {
console.log('hello');
}
Webpack configuration :
module.exports = [{
{
output: {
filename: 'test.js',
path: __dirname + '/public/javascript/dist'
},
entry: [
'./public/javascript/test.js'
]
}
]
Code to test :
<html>
<head></head>
<body>
<script src="./javascript/dist/test.js"></script>
<script type="text/javascript">
window.onload = function()
{
test();
}
</body>
</html>
But I receive the following error : Uncaught ReferenceError: test is not defined.
Question : why?
[Edit] Reponse is : "export" is missing.
Thanks to that, I updated as following:
Code to export :
export function Test() {
this.t = 1;
Test.prototype.toto = function()
{
console.log('hello')
}
}
Webpack conf :
{
output: {
filename: 'test.js',
path: __dirname + '/public/javascript/dist',
library: 'test',
libraryTarget: 'window'
},
entry: [
'./public/javascript/poc/test.js'
]
}
To create the object, I have to do : var t = new test.Test();
It's a bit heavy... Is there a way to only have to make : var t = new Test(); ?
why?
Because you haven't exported anything from your entry point and, by default, webpack generates output in umd format without polluting global scope.
You first have to export your function:
export default function test() {
console.log('hello');
}
Then specify "library" and "libraryTarget" in your webpack config. Docs. For example:
output: {
filename: 'test.js',
path: __dirname + '/public/javascript/dist',
library: 'test',
libraryTarget: 'window',
libraryExport: 'default'
},
this will generate code that adds window.test = _entry_return_.default .
Since webpack 5 you're able to export to a variable instead of binding methods to the global window.
So when you are exporting your function like so:
export default function test() {
console.log('hello');
}
And configure the library type to var (libraryTarget in earlier versions of webpack 5):
output: {
filename: 'test.js',
path: __dirname + '/public/javascript/dist',
library: {
name: 'myLibrary',
type: 'var',
},
}
You can access your method like so:
myLibrary.test()
Is there any way to import a requirejs config in to my grunt config file? Right now I have to keep two identical versions, one in app/main.js and one in my Gruntfile.js:
module.exports = function(grunt) {
// can I import app/main.js requireConfig here?
var requireConfig = {
paths: {
jquery: 'lib/jquery'
// etc...
}
};
});
My main.js looks something like this:
requirejs.config({
paths: {
jquery: 'lib/jquery'
// etc...
}
});
define(['app'], function(app){
app.start();
});
You can use standard module pattern which supports different type of module system like following.
Your requirejs config file like this
amd-config.js
(function(factory) {
if (typeof define === 'function' && define.amd) {
// Register as an AMD module if available...
define('amd-config', [], factory());
} else if (typeof exports === 'object') {
// Next for Node.js, CommonJS, browserify...
module.exports = factory();
} else {
// setting browser global when none of the above are available
window.amdConfig = factory();
}
}
(function() {
var amdConfig = {
baseUrl: 'scripts',
paths: {
//Paths here
}
};
return amdConfig;
}));
In gruntfile you can just require like any other module.
var requireConfig = require('amd-config');
Include it normally like you do in index.html with script tag before app.js
and then in app.js use it like following.
requirejs.config(window.amdConfig);
define(['app'], function(app){
app.start();
});
PS: There are cleaner way of including it in app.js.
More cleaner than second, create global variable require and include the script before requirejs script. requirejs checks if there is global variable with name require containing object. If its there, it is used as a config object. So you dont have to call requirejs.config yourself.
You can require the file like you require other files. In that case it will be treated as a require module and you will receive the object in require callback. call your requirejs.config like following.
```
require(['amd-config'], function(amdConfig){
requirejs.config(amdConfig);
require(['app'], function(app){
app.start();
});
});
```
A simpler approach you could use, if you are using grunt to build the project. You can simply use:
options:{
mainConfigFile: "path/to/Config.js"
}
granted you need to use:
https://github.com/gruntjs/grunt-contrib-requirejs
You can try something like this:
function getRequireConfig(requireFilePath) {
var config;
var configFileContent,
_require;
_require = require;
require = {
data: {},
config : function (configParam) {
this.data = configParam;
},
get : function () {
return this.data;
}
};
configFileContent = readFileSync(requireFilePath);
eval(configFileContent);
config = require.get();
require = _require;
return config;
}
What it is doing is:
Override require definition to a custom implementation
Load require config file
Eval it so that the config function of custom implementation will be
called Get the config object from data
I've tried the solution in other SO post, e.g. this, but it didn't seem to work. I always got undefined as a result.
My configuration in my HTML.
<script type="text/javascript">
var require = {
config: {
'config': { --> if I change this to app, I could read the value in app.js
userId: 1
}
}
};
</script>
<script src="lib/require.min.js" data-main="app"></script>
My config module:
define(['module'], function (module)
{
return {
userId: module.config().userId,
userName: "Test"
}
});
I use the config module in my app.
require(['modules/config', 'modules/A'], function (config, a)
{
var userId = config.userId; --> undefined
var userName = config.userName; --> Test
});
Any idea? Did I miss something? I use JQuery 1.12.3 and RequireJS 2.2.0.
Solution
Edit the config you pass to RequireJS to:
var require = {
config: {
'modules/config': {
userId: 1
}
}
};
Explanation
Your modules ids are not matching. When you require your module, you use require(['modules/config', .... So the module name is modules/config. However, in your RequireJS configuration you provide a configuration for the module named config. So when you use module.config() inside modules/config, RequireJS searches for a module named modules/config in the configuration and does not find it. So you get undefined. Performing the fix I mentioned earlier will allow RequireJS to find the configuration.
Alternatively you could use paths to have the module be loaded under the name config:
var require = {
paths: {
config: 'modules/config'
},
config: {
config: {
userId: 1
}
}
};
And use require(['config', ....
I followed the below technique to get it working. The files included in HTML. They can defined in config paths.
Directory structure:
-index.html
-modules
- myModule.js
-app.js
HTML (index.html)
<script type="text/javascript">
// require would refer to the require.js global. So i am using requireVar
var requireVar = {
config: {
userId: 1
}
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<script src="modules/myModule.js"></script>
<script src="app.js"></script>
file myModule.js
define("modules/myModule",function ()
{
return function(){
return requireVar.config.userId;
}
});
and finally my app.js
require(['modules/myModule'], function (myModule)
{
alert("");
var userId = myModule();
console.log(userId);
});