What is the difference between exlude and excludeShallow in r.js Why are they used.
The r.js example build file explains the difference between exclude and excludeShallow through examples, where excludeShallow would generally be helpful during development.
//This module entry combines all the dependencies of foo/bar/bip into one file,
//but excludes foo/bar/bop and its dependencies from the built file. If you want
//to exclude a module that is also another module being optimized, it is more
//efficient if you define that module optimization entry before using it
//in an exclude array.
{
name: "foo/bar/bip",
exclude: [
"foo/bar/bop"
]
},
//This module entry shows how to specify a specific module be excluded
//from the built module file. excludeShallow means just exclude that
//specific module, but if that module has nested dependencies that are
//part of the built file, keep them in there. This is useful during
//development when you want to have a fast bundled set of modules, but
//just develop/debug one or two modules at a time.
{
name: "foo/bar/bin",
excludeShallow: [
"foo/bar/bot"
]
},
The r.js documentation further explains that excludeShallow may be useful for rapid development: when using the optimizer through the command line, the excludeShallow option can be used to exclude optimization of a module.
Related
I have a global node module that uses babel-core transform function.
I have no .babelrc at the root of my module.
It takes a file and basically just use transform to 'compile' it.
const result = transformSync(content, {
filename: src,
});
There is a .babelrc file along with the said file and I'm indeed able to find it
{
"presets": ["#babel/preset-env"]
}
but it complains about not finding '#babel/preset-env' which is right, because the module is installed with mine and not the file/.babelrc being transpiled.
I've tried many options in https://babeljs.io/docs/en/options but still can't make it work.
How can I configure transform so it get plugins from my module while loading babel configuration from the folder of the transpiled file ?
By design, Babel's plugin loader searches for plugins relative to the config file that references them, or uses the cwd for plugins passed directly in the transformSync options. Control of that isn't exposed to utilities calling Babel.
Changing those sematics would mean that a Babel config file would vary in behavior based on the tool that was loading it, which would be very inconsistent for users, especiall considering that one of the main benefits of having the config file format is so that config can easy be shared across multiple tools calling Babel, for instance one for tests and one for bundling.
If you want users to be able to customize your tool, it sounds like what you may actually want is your own entirely separate config file for your tool, so you can define whatever semantics you want for that.
I'm having a problem using Gulp to compile a RequireJS project properly. What I need to do is have gulp create a single distribution file that only includes the file necessary to have the application run.
In our application we are following a modular approach breaking out major pieces of functionality into different repos. So while developing my piece I have RequireJS including angular and many other vendor libraries that are common to all of the projects in the application. However when I go to move my piece into the larger application I no longer need these files in the final output since those dependencies also exist in that application (and having those extra libraries also makes the final distribution file over 300K).
I've tried creating another main.js (called gulp-main.js) file that only includes the dependencies that I need but when I run the gulp process it fails. I don't get an error but it seems to be failing because I'm not including the required dependencies for the project to build successfully. Below is the config object that is being passed to the RequireJS optimize method.
var config = {
baseUrl: 'app/',
mainConfigFile: 'app/main.js',
out: 'dist/app/output.js',
name: 'main'
};
Any ideas on what I could do to either remove the unnecessary vendor files or even split them into a single vendor and a single non-vendor file would really be appreciated. I have already tried using the modules array option but that does not produce the results that I am after since it seems to create a single file for each item defined not a single compiled JS file with all scripts contained within.
Thanks in advance.
When you don't want some file in your final output. add " ! " in Your gulp task's src
example :
gulp.src(['./app/*.js', '!./node_modules/**']) // '!./vendor-libraries-dest to igonore'
Is there a way I can get grunt-closure-compiler to apply minimization to each file separately in a directory (overriding the original) instead of producing a single file as the output. If I can't override the original I am happy to place output files in a separate output directory.
https://github.com/gmarty/grunt-closure-compiler
Normally the procedue would be like this producing a single file:
grunt.initConfig({
'closure-compiler': {
frontend: {
closurePath: '/src/to/closure-compiler',
js: 'static/src/frontend.js',
jsOutputFile: 'static/js/frontend.min.js',
maxBuffer: 500,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT'
}
}
}
});
You can use the module option of the Closure Compiler to produce multiple output files. You would have to list each JavaScript file as its own module, so if you have many JavaScript files this could be pretty tedious.
The module option is not very well documented, but see the posts below to see how it works:
Using the Module Option in Closure Compiler to Create Multiple
Output Files
How do I split my javascript into modules using Google's Closure
Compiler?
As the other answer suggests, you need the modules option. However grunt-closure-compiler doesn't actually support this.
There's a fork of it which supports modules. It doesn't use the standard grunt file config so you can't use globbing patterns to get it to take all of the files in a folder. I've gotten around this by writing a grunt task to create the modules object and pass it into the config for the closure-compiler task.
My program is using RequireJS to manage dependencies in javascript, and it works fine - except that I have an issue where the only way to do the minification is to use the r.js optimization system to do minify and combine when I compile the application.
This does work; I have it functioning how I need it to - but it is very wasteful because it puts all of the scripts in a single document. This seems to defeat the entire purpose of the module loading - and it makes the site a great deal slower.
Is there a way - other than manually minifying each file, every time I change them, to have this optimizer keep files separated so that the module loading can still only pull the files it needs?
I am doing the minification/combination using nodejs with a build event in Visual Studio, similar to this;
build.bat
node minify.js -o build.json
build.json
{
"baseUrl" : "../../home",
"name": "../lib/app/config",
"include": [
// each file gets listed here
],
"exclude": [],
"optimize": "none",
"out": "program.js",
"insertRequire": [
"../lib/app/config"
]
}
config.js
require.config({
baseUrl: '/app_content/scripts',
});
Visual Studio Build Event
node "$(ProjectDir)scripts\lib\app\minify.js" -o "$(ProjectDir)scripts\lib\app\build.json"
So this makes a huge program.js file that has everything - with explicitly named modules. It runs and functions, but ... again, that kind of defeats the purpose, right?
it makes the site a great deal slower
That can't be true, concatenating into a single file reduces the amount of necessary HTTP requests for a page and should improve performance quite a bit. If you just want to minify your files, use a tool that does just that - e.g. UglifyJS.
Using Require.js and it works pretty solid.
However, I'm reading about optimization (http://requirejs.org/docs/optimization.html) using r.js.
To my understanding it bundles top-level defined modules into 1 file (great because: less http-calls, minified ) .
This seems fine when I only have 1 pagetype defined, i.e: 1 set of required modules to load. However, in any normal site, you'd have multiple pagetypes each requiring different modules.
Now, I'm just wondering how clever r.js really is? Does it take all the multiple pages (with different 'requires') into account when determining which modules to package together, so that I don't end up with X bundled javascriptf-iles for X pagetypes, even though there's substantial overlap in the modules included in each of these bundled scripts.
Any hints I need to give to the optimizer, is it handled automatically, etc?
Clarification much appreciated,.
What I understand is that the optimizer finds dependencies for a file by looking for require() calls, and makes a list of what it finds. (So it only finds dependencies passed to require() as literal strings.) Then the file is combined with its dependencies (recursively) into one file, and minimized.
You can control what goes into a module in the configuration. Here's a sample:
({
baseUrl: "Website/Scripts",
dir: "Staging/Scripts",
modules: [
{ name: "main", include: ["Rotator"], exclude: ["jwPlayerDialog"] },
{ name: "jwPlayerDialog" }
],
paths: {
"jquery": "empty:"
},
fileExclusionRegExp: /^\.|Microsoft|modernizr|unobtrusive|\.min\.|\.debug\./
})
If you turn off minimization, you can easily see what's being included in each file. A module could be included in more than one file. For example, the Rotator module above will be in main.js, and it will still be available as Rotator.js.