Im looking for a way to compile all of my coffeescript files, currently in individual files such as features.coffee // scroll.coffee etc etc, in to one main outputed .js file.
Im using an application.coffee file at current to act as the main file. Ive imported my various files using:
#= require features.coffee
#= require scroll.coffee
However when Im outputting the application.coffee to application.js on the code from within the application.coffee is outputting and not that of the imported files
Im assuming that coffeescript imports are not native features and that some sort of plugin will be needed
Thanks in advance
You have to manually merge the source files into a main script file ( aka concatenate them ), then compile to JavaScript. You have not specified what you are working with, but in node.js, the require function only executes an external script ( to put it very simply ), it does not place the source code into current file as you seem to be expecting.
There are many tools on the network to concatenate your source code into a single main script - just google around and find what suits you best.
Related
I have a .js file named:
app/assets/javascripts/generics/directory/edit_person.js
that isn't included in the application.js because there's not\ require_tree and looking at the network tab in the browser, I've confirmed the edit_person.js is being served by itself.
The erb being rendered is named:
app/views/company_area/directory/edit_person.html.erb
I don't see any script tags in here referencing edit_person.js, is there some magic that Rails is doing?
You'd have to show us the relevant code.
A Rails application typically will serve JS in one of three circumstances:
A JS file is specified in your html. This includes application.js in the layout file.
A JS request was made and you are responding to that JS. Example: the JS file edit_person.js exists in the views folder corresponding to the controller action edit_person and a client makes a .js request to that action
Webpacker is configured to handle JS alongside the asset pipeline. [1]
If none of these apply to you, then you will not see your JS loading on the page. Knowing that, you need to check your layout, application.js, and controller actions (responses).
[1] Webpacker would not likely be serving these files due to their location in your dirs, but it was worth noting for the sake of accuracy.
is this an app you wrote? If not I would check any of the layout files (particularly: views/layouts/application.html.erb or views/layouts/persons.html.erb if available )
I'm fairly new to webpack.
From a YouTube tutorial (Academind) I watched, the guy teaches the user to include the HTML file in the entry .js file. From what I understand, webpack will then use HtmlWebpackPlugin to extract the required HTML file out, then inject either as a file or code into that HTML file. Is my understanding correct?
I'd like the above question answered, but that's not the main question. The main question is the reason for going through such pain.
Can't I just have the .html files copied to /dist and have each .html file have bundle1.js, bundle2.js, etc., in them?
That tutorial required html file because it was thought that it was easier to let webpack (HtmlWebpackPlugin) insert all the script tags for the bundles automatically, without having to do that manually.
You can also not require that, and add the template property on HtmlWebpackPlugin. That will do the same thing.
You can also copy to dist, of course. But that would require you to insert manually script tags on your html. That starts to get worst when you have hashes on your filenames.
I try to integrate angular to rails app. I extended assets folder by
config.assets.paths << Rails.root.join('node_modules')
and it's good work but my console has serveral messages error
http://localhost:3000/assets/rxjs/Subject.js.map
Rails app couldn't .map extension how to load it
Those are "javascript source map" files. If your Subject.js javascript file has been minimized/uglified, then you can generate and add a "map" file to let browsers know how to "unminimize"/"unuglify" your js file.
If the Subject.js file is written by you, then I guess your environment setup with different node.js and gulp.js modules has it enabled. Make sure those files are copied to your /assets folder as well.
Alternatively, you can disable them by removing special comment at the end of your javascript file:
//# sourceMappingURL=/assets/rxjs/Subject.js.map
Or, less likely, your server might be sending X-SourceMap header.
I'm wondering if someone can check my understanding of what the intended purpose of HTML5Boilerplate js directories. I understand that main.js is where I'm expected to place all site specific javascript that I author. Plugins.js is where I would place all jQuery plugins used. Both main.js and plugins.js will be concatenated and minified by the build process. Vendor.js holds javascript libraries. This directory will be minified (unless it is already minified) but not concatenated.
If this is true, then my question is where should something like cute slider which has a modular structure be placed? I'm thinking I want it to be minified and concatenated so it shouldn't go in the vendor directory. I don't believe I can add cuteslider's javascript to main.js or plugins.js without destroying it's modular structure. Should I create a new directory, and call it something like apps, to hold cuteslider code and then modify the build code to minified and concatenated it?
Here is a snippet of cuteslider's code structure
cute
cute.2d.module.js
cute.canvas.module.js
cute.css3d.module.js
cute.gallery.plugin.js
cute.slider.js
cute.transitions.all.js
First you have to consider cuteslider as a plugin.
Add the required files to make the plugin working (cute.slider.js, cute.transitions.all.js and respond.min.js) in the plugins.js.
Then add the js to load the slider into your page in the main.js as
$(document).ready(function() {
// code here to load cuteslider
});
The modular look have to be set only in the main.js file.
after optimizing a require.js project (pushing everything into one "big" .js file), is there any way to circumstance the need to include the require.js file (which then only loads one single .js file) and load the compiled file directly instead?
You can use a light weight AMD loader like Almond. You will still need a loader anyway as your compiled JavaScript still use define and require.