When using require.js (r.js) to optimize js code, all js source code are copied to destination directory(dir property).
Is there a way (some configuration) to prevent requirejs to copy source files?
If you add removeCombined: true to your r.js build config the optimizer will remove (essentially not copy) all source files that were combined into your output module(s).
Alternately, if you are referring to source files that are not part of the requireJS build at all, try using fileExclusionRegExp: /^\./ in your config.
See the example full r.js config file for more details.
As rharper mentioned you have to use this property:
fileExclusionRegExp
For example if you use cssmin to concat/minify your files and don't want requirejs to move your stylesheets, and if you have let's say another folder foo you can use:
fileExclusionRegExp: /css|foo/
to exclude these folders from being copied to your build directory.
use this config:
keepBuildDir: true,
this can keep output dir
detail: https://github.com/jrburke/r.js/blob/master/build/example.build.js#L70
Related
I have a webpack app that I'd like to read a json file in at runtime.
After webpack packages the application, I'd like the json file to be excluded from the bundle.js but still in the package folder. How can I do this?
I'd use copy-webpack-plugin
Pretty simply moves files from one location to another
You moved the json file into the destination package by passing it an object:
{ from: 'source', to: 'dest' }
Checkout the repo for usage examples
Use the file-loader which will let you specify an output file. Not the cleanest, since webpack really really wants to bundle everything, but it works.
require('file?name=../newfile.json!/somefolder/original.json');
The above will create newfile.json a directory above your webpack output folder. (Folder change for illustration purposes; not required.)
If you want to re-require the json*, mark it as an external dependency in the webpack config and use `require('../newfile.json').
*I'd suggest using a regular ajax call to pull the json in though. That way it's clear that the json is an external and you won't have to go through webpack's ajax system.
I am trying to figure out how I can accomplish the following using brunch. This is the current directory structure for our app:
--app
--base (theme folder, considered the master for all themes)
--sass
--js
--theme2
--sass
--js
--theme3
--sass
--js
...so on
The base folder serves as a master for all other themes. However, if another theme has a file in the sass directory or js directory that matches one in the base folder it overrides that file in the base folder (this applies for imports as well).
I have so far created this which works the way it needs to but it circumvents the brunch pipeline in that I write out the files (doesn't currently support file concatenation) and I would prefer to do this using the proper brunch pipline.
What happens is that each sass or js file it encounters in the base folder is used to generate a new file for another theme. E.g say the base theme has a file called main.scss. The path passed to compile is base/scss/main.scss. Now I want to use this same file for the other themes so I get all the theme folders and dynamically use this base main.scss file for each of the other themes. However, I also alter the inner imports to substitute files imports if they exist in the other themes directory. Its not the same file being spat into multiple locations.
The problem is that I want to dynamically generate new CSS files for brunch to render to different folders not related to the original path passed in (and thus the joinTo config option for this path). By calling the callback, it automatically uses the original path parameter passed to the compile method.
Use overrides in your brunch-config to change your joinTos to include base plus the given theme. You can also customize the build output directory or anything else for each theme if that helps. Then run each build separately using a command like brunch build --env theme1.
In the data-main require js file, we write like this:
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore'
}
What I did was manually download the row JS library files and make "lib" folder and move the file into the folder and change the file name if necessary.
I use Nodejs for server, and I am wondering if there's any tool to create these client-side Require path files automatically from the installed Node-Modules. Browserify does a similar job if I don't user Require (creating one JS file, and call it in the other browser JS files.) But it seems like Browserify cannot be used as a path in Require.
Any thoughts? Thanks.
An alternative solution (to browserify, with which I'm not familiar) is to use bower for managing client side libraries. It is similar to node/npm, but is geared towards browser libraries.
It will not copy or rename libraries, because that step isn't necessary. Instead the libraries will be placed in a directory called bower_components. The paths config would look like
paths: {
jquery: "../../bower_components/jquery/dist/jquery",
bootstrap: "../../bower_components/bootstrap/dist/js/bootstrap",
...
}
(the actual number of .. in the path depends on values of other requirejs options).
In development, when all dependencies are loaded asynchronously as separate files they will be loaded from bower_components and requirejs optimizer will find them there when generating the optimized single source.
Adding the dependency paths to the config file can be half-automated with grunt plugin grunt-bower-requirejs. The idea is that after a library is installed using bower install LIBRARY it's path can be added with grunt bower.
While building Bootstrap from source code, the default build path is dist, can I specify another path without changing the Gruntfile.js too much?
Just change instances where you see dest: dist/*** into your desired location. Quickly looking at the gruntfile, it looks like you can basically do a replaceall on dist to whatever you want -- it will rename the task names but if you run the default task it should turn out fine.
If this doesn't work, just change dest and cwd, etc. fields to your desired location.
I have a unique situation where I need to have both the source and main.js in one file and for everything to initialize within that file, so no require calls on the page. Is this possible?
If you want to include require.js with the main.js source, you can use this kind of command:
node ../../r.js -o baseUrl=. paths.requireLib=../../require name=main include=requireLib out=main-built.js
Since "require" is a reserved dependency name, you create a "requireLib" dependency and map it to the require.js file.
Once that optimization is done, you can change the script tag to reference "main-built.js" instead of "require.js", and your optimized project will only need to make one script request.
Source