I'm confused about my r.js optimised script. I imagine the answer to my question is in the documentation but I think I'm going doc-blind from staring at it too long.
My application has a directory structure like this
-index.htm
-js/app.js
-js/init.js
-js/appname/*.js
When in non-optimised mode index.htm contains the following line:
<script type="text/javascript" data-main="js/app" src="js/lib/require-2.1.11.js"></script>
and everything works fine. My abridged js/app.js script looks like this:
requirejs.config({
baseUrl: 'js',
paths: {
...
}
});
require(['init']);
When I build the optimised script I specify js/app.js as the mainConfigFile and everything builds as expected. However when I update my script tag's data-main attribute to the build product my application doesn't initialise.
If I manually execute require(['init']) in the console it starts up as expected. Because r.js is using js/app.js as its config file that doesn't get included in the optimised script, which means my require(['init']) also doesn't get included.
I thought I could fix this by moving require(['init']) to the end of js/init.js and this does fix the optimised build (it initialised as expected), but now that the call isn't in js/app.js the non-optimised version never initialises. If I include the call in both files I get an error.
How can I ensure my first module is required after either the optimised or non-optimised file(s) are loaded? I don't understand how I'm supposed to make that first call after my first module's dependencies have fully loaded.
Because r.js is using js/app.js as its config file that doesn't get included in the optimised script
Well, then modify the build config you pass to r.js so that js/app.js is included in the final optimized bundle. There's nothing that forbids you from including the file you point to with mainConfigFile in the final bundle.
Related
I am bundling 6 different modules together in Webpack. One of then is Mustache.js.
The Mustache templates live inside the HTML page. They are not in a separate file. Now when I load my page ... I get this error ...
This is my app.js file
require('mustache');
require("./js/modules.js");
require("./js/custom.js");
require('owl.carousel');
require('bootstrap');
require("expose-loader?$!jquery");
I have tried changing the order, but nothing is working.
The 'modules.js' file has a dependency on 'mustache'. So I went into the modules.js file and added require('mustache'); at the top in that file, but nothing changed. Do I need to add any additional configuration to my webpack.config.js file ?
If I take the Mustache.js modules out of the bundle and load it normally on the html page like <script src="js/mustache.js"></script> then everything works fine.
Can someone please advise how can I include this module in the bundle ? Already wasted so many hours trying to make this work, but to no avail. Many thanks in advance.
It sounds like it's working when not bundled because you reference the script directly in the DOM and Mustache is added to the global scope, in this case window.Mustache.
In your app.js or any other 'bundled' script that is referencing Mustache you'll need to require and assign to a variable:
var Mustache = require('mustache');
I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!
Alright, I've got a multi-page site with page-specific modules. Each page should load two JS files generated by r.js: main.js, which is a collection of all modules available globally, and "page-name-here".js, which is a collection of the modules only needed for the current page.
I tried to pattern it somewhat off of this response to a similar question: https://stackoverflow.com/a/11730147/843490.
I also wanted to structure it so that I wouldn't have to explicitly include jQuery as a dependency in every module, but that it would just be loaded and executed first.
Build.js file: http://pastebin.com/XP2cCh18
Main.js file: http://pastebin.com/vsAnm99S
The r.js tool seems to be compiling everything correctly with all modules written into main.js and "page-name-here".js. BUT, when I load the page, require js starts bringing in EVERY global module individually even after main.js has loaded. I assume this is due to global.js not being listed explicitly as a dependency, but I'm unsure of have to tweak it to remedy this.
Any clues? Thanks!
I am trying to learn Derby.js and I am having a lot of trouble. I know I can include packages such as jQuery through npm and add it to the node_modules folder, but this isn't quite what I want to do. I want to be able to include these files like I do in normal HTML.
So I want to do something like <Head:> <script src="js/jquery.js"></script>. This does not work though because it cannot find the js directory. I expect this has something to do with the way node.js runs an app and that the app itself will not hold the js directory.
Any help would be appreciated!
Derby offers the Script: tag:
<Scripts:>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
The components directory is because of the usage of bower. Put the components directory into the public directory. According to the express FAQ, the static routes search below the given directory (which is public in derby's example application). Configure bower to put the files under public/components (Choose bower install directory).
The public directory is configured at lib/server/index.js: .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR})), where publicPath is configured above to path.join(root, 'public').
Be aware that the "idea behind the inline script is that it runs immediately, before any of the external scripts are loaded. This should only be used in rare cases where the script should run before the page is displayed in the browser, such as sizing something to the window or autofuocusing an element in browsers that don't support the "autofocus" attribute." Nate Smith in the derby google group.
Inline scripts should be placed in inline.js, located in the same directory as the application's index.js.
If you require jQuery to do something on the loaded page, following code snipped worked at my side (Firefox, Chrome) in inline.js:
window.onload = function() {
alert($(this));
}
I'm beginning to evaluate javascript module tools like RequireJS for javascript modularization. This seems useful, especially during development, so I don't need to recompile all of the js files into mylib-<version>.js whenever I change one of the dependent files.
My app is distributed with both html and javascript files, and in production, I would like to use the compiled version of the javascript file.
So in development, my html file might look something like
<html>
<head>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
</html>
But in production, I would expect it to look more like
<html>
<head>
<script src="mylib-1.0.js"></script>
</head>
</html>
I wouldn't think it production that there should be any need to reference requirejs if I am distributing a compiled file.
Is there a way to do this without having to manually change my html files before I distribute the app?
RequireJs has an optimization tool, which can help you to minify and concatenate your modules. It has a lot of options, and can be difficult to use, but it gets easier with a build tool like GruntJs or (especially) Yeoman, which uses GruntJs to build.
In both you can use the rjs task (which optimizes modules), but again Yeoman is a bit easier since it has generators which will configure it already for you:
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
In the index.html you just use a comment line to specify which js files should be minified/concatenated to which output file:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
In the example above, the modules will be concatenated to ONE file, named amd-app.js.
Edit:
This will be done by executing grunt from the command line. This will start a lot of useful tasks, which will build the project in a dist folder, but again this is highly adaptable.
The resulting index.html file (in dist) has only (if you want) one javascript file:
<script src="scripts/15964141.amd-app.js"></script>
My advice: use Yeoman to make life easier (at least for handling minification/concatenation).
First you have to compile your depency tree into one file using the r compiler. After that you can a striped down AMD loader like almond. At least you have to find a way to change the url in your index html.
Take a look at gruntjs which can automatize the whole thing, there a bunch task to like usemin that helps you with the process.