Is there a way to include files in a JavaScript file at "compile"-time in the source code? Basically what I'm looking for is a way to compile multiple files into one, without having to define the included files with the closure compile command.
As an example I'm using sass language to more precisely describe what I'm looking for;
# Sass file
# Include dimensions
#import "_dimensions.sass"
Edit
To clarify, comparably with the command;
java -jar compiler.jar --js file1.js file2.js main.js --js_output_file compiled_output.js
I was asking if there is a way to do these includes in code instead, so for example; If one file is called main.js, this file would itself include file1.js and file2.js by defining them in the source.
Related
I have my React components broken up into separate JS files for manageability and using the following command to compile the files in my src folder into a single JavaScript file:
babel -w src -o scripts.js
My problem is the order in which the files are compiling. I want to make certain that the base file containing my render() function is last and that a file containing 'use strict;' is first.
Is there a way to tell Babel the order of files to process?
Thanks!
-Eric
I'm in the process of refactoring a couple of front-end JS snippets I regularly reuse as CommonJS modules. For my own purposes I'll use them with webpack or browserify and so a single JS file that looks like the following would suffice:
var Dependency = require('dependency');
function MyModule() {
// blah blah blah
}
module.exports = MyModule;
As long as I've got a package.json in the repo with the required dependencies I'll be able to include this module in future projects via npm/yarn webpack/browserify or whatever my toolset is on that given day.
But what if I want the module to be available as a standalone that can be added via a <script> tag?
Should I have 'dist' and 'src' directories in the repo, with the 'dist' directory containing the module code above, alongside an app.js that just says window.MyModule = require('./mymodule.js'); and the 'dist' directory containing the webpacked output for use with a script tag?
Should my bundled dist file contain the source of the dependencies or should I note in the readme, that the <script> tag for my module should be preceded by <script> tags for it's dependencies?
Instead of a 'dist' directory, should I have an (other) mymodule.js in the repo root alongside an index.html that includes it via a <script> tag and demos it's features?
Perhaps I'm over thinking this but I've encountered a number of different strategies in other people's repos, and I'm just wondering if there's any sort of consensus or best practice around this.
I have a node.js folder which contains a main js file and several other js files which contain the functions that the main js file will import.
I have minified all the js files in this folder.
In the original main.js file, it calls another module with the following line;
var func= require('./func');
After minification, this line remains the same. However, func.js is changed to func.min.js after minification. Do I have to modify the minified file manually to have it import func.min.js this way?
var func= require('./func.min');
It is quite tedious to manually make changes to the minified file. What is the most efficient way to minify my js files and get the main.min.js working?
I am using Webstorm file watchers to minify the js files.
To get your main.js working, change the require line in main.js to;
var func= require('./func.min');
This will work because you are using Webstorm file watchers to minify the js files. Therefore, when func.js is changed, func.min.js will be automatically generated.
we have a problem at work, we are using require js but our folder structure is a bit different,
we have the following:
--js folder
--Folder
---some base js files
-Folder
---main
--src
---require.js
--- require JS modules
--plugin js files
--more js files
We would like to minify all these JS files to a SINGLe js file for production as such
---js folder
--min-all.js
Is this possible?
if so how? ..
Any help would be appreciated!
Thanks!
I just thought I would clarify that the other Folders contain standard non modular javascript files, they can be a mix of plugins or simple javascript helpers.
The short answer is: yes, RequireJS can do this.
Basically, you will need to create one JS file that requires all of the resources that you want minified. Then you will point the optimizer at that file and it will mash them all together.
require(["one", "../another/two", "folder/three", "folder/inner/four" ... ]);
If that file was called myfile.js, you would run the optimizer with similar parameters to this:
node r.js -o name=myfile out=optimized.js
If you have libraries or other files that you do not want included into the final optimized file, you would use the excludeShallow flag. e.g.
node r.js -o name=myfile out=optimized.js excludeShallow=jquery.min
There are more options so you should check out their optimization documentation if you haven't yet.
This is probably a quick question. I'd like to run the YUI compressor so that, instead of overwriting all of the javascript files in the input directory, it dumps the output files into a subdirectory called min. I would like to do something like
java -jar yuicompressor-2.4.7.jar -o *.js .\min\*.js c:\MyJavascriptDirectory\*.*
but instead it just overwrites the existing files with the minified files. Does anyone know the correct syntax to accomplish this?
Thanks!
I'm not sure of the correct syntax to do that, but someone has made a modification so that you can set up your output directory as follows
java -jar yuicompressor.jar --output-dir /some/folder/for/compressed/js *js
This allows you to have a source folder and a compressed folder. As opposed to having source and a bunch of -min.js files in the same folder.
You can download the mod at the bottom of the page here http://yuilibrary.com/projects/yuicompressor/ticket/2528131
java -jar yuicompressor.jar -o '.js$:-min.js' *.js will minify all .js files and save them as -min.js then you could just move all those files: mkdir min; mv *-min.js min/.
Source