(Related question: what's the difference between rv.js and r.js?)
I've got a series of RactiveJS-based components, each in their own module. I use the rv.js loader (linked above) mentioned on the Ractive site. I love it, but what I want to do is use that (or something similar) to build to one JS file that will work even in non-AMD/RequireJS apps. I've looked at Almond, but it seems to want to use r.js (rather than rv.js), and I'm not sure what the difference is or what changes I'd need to make.
Bonus points: is there a way to run all of this in Gulp? I'm one of those people who cringes when he has to use the command line, so please talk slowly and forgive my ignorance:)
A bit late to answer, apologies for that.
rv.js is a RequireJS plugin that loads ractive components as if they are javascript modules
r.js is the RequireJS optimizer, used to bundle together all files and minify (exactly your use-case)
RequireJS is quite large in size, and you don't want it bundled with your application js during a build.
Enter almond.js. It mimics the module resolution of RequireJS, but doesn't have the code to handle actual loading of the files over the network. The result is a smaller file size.
So, your workflow would be:
You use RequireJS during development
Use rv.js, as you are already, to load ractive components
When it's time to build, you use r.js to build
And ensure almond.js replaces RequireJS in the final built js file
Now, I use grunt, and there is a plugin for that: grunt-contrib-requirejs
For gulp, I suggest gulp-requirejs-optimize
It has options to replace requirejs with almond during the build process if you look at the documentation on that page.
Hope that helps.
Related
I'm using CSS Modules (Sass) with rollup on a component library project, which is working well. Each component ends up with a dist folder containing a single JS bundle file, and a corresponding CSS file with the scoped CSS classes so consumers of the component don't have to worry about CSS class name conflicts. All they do is include the JS bundle and the CSS file and everything is great. Yay CSS Modules.
The problem I'm now facing is that some components really need separate "themes" - ideally, separate CSS files, one per theme. So consumers can continue as they've been doing: including the JS bundle, but now choosing which CSS file to include to pick a theme.
I'm not sure how to get this going with CSS modules & rollup, and whether this is even the sort of approach others are taking. From what I can see, rollup always handles bundling things together, whereas I want separate CSS files, all of which get their classes renamed identically during the build phase. That way, if within my JS I refer to styles.myclass, if myclass had gotten renamed to scoped-myclass by CSS modules for the original CSS file, for a second CSS file it would also get the same name.
This would keep consumption of the component extremely simple - just a matter of including a different CSS file.
Any suggestions?
Awfully late, but let me answer this 3 years on. So what I ended up doing was totally detaching the CSS generation step from rollup and relying on the Sass CLI to handle that portion of the build process. It felt a bit klutzy, but I remember it wasn't awfully hard to do and solved the problem I outlined above. I don't believe there was a plain rollup solution at the time, nor do I think there's one today.
However... in my case the whole approach was kinda mistaken. This certainly won't be everyone's scenario, but let me spell it all out because hey it may be useful and it definitely wasn't obvious to me at the time.
This was for an in-house shared component library, where each component and its corresponding CSS was a separate npm package stored in our Artifactory. When it grew, plenty of internal references popped up, e.g. multiple components would reference the Button component, and over time they'd reference different versions of the Buttons component - each of which needed its own properly scoped CSS, unique to that package-version.
So what I found was that by doing it this way - having the CSS generated as part of the npm package dist files - I had to write an additional layer for the consumer applications that would parse their node_modules/ folder for our own internal components and combine all the different CSS files, such as the multiple versions of buttons. e.g. the main application would directly import buttons v1.0.0 in its package.json file, but the Dialog component (also included in the package.json) could include buttons 2.0.0 as its own dependency. For every version of the package, there was a uniquely scoped version of the CSS - so the consuming application HAD to include every version otherwise the styling would be borked.
So all in all, it ended up being way more complex that I wanted. I thought I could make it easier & better with the separate generated themed CSS files as part of the package dist, but it didn't end up that way. If I could revisit that project today, I'd re-examine a solution used by Material UI and others which I kinda poo-poo'd at the time: automatic injection of the CSS into the page by the component JS, rather than generating standalone CSS files which required extra work by the consumer applications to gather up and add to the final webpage. Frankly, now I regard it as the "least crap". There are definite downsides to the injection approach (extra work done on every page render for everyone! Yikes!), but there's no doubt in my mind it hugely simplifies the job of the consumer applications. It's a balancing act, but in 20-20 hindsight I'd lean towards the injection approach. With that, scoping & theming is a different and much simpler problem.
If I got you right, consider looking at SCSS plugin: rollup-plugin-scss. It captures all spare .css files imported in the components, and then processes them through underlying node-sass. The catch is, it seems like you can write a custom callback function that'd handle your CSSs differently based on conditions you throw in.
Based on the example from the plugin's page:
import scss from 'rollup-plugin-scss'
...
export default {
input: 'src/index.tsx',
output: [...],
plugins: [
...
output: function (styles, styleNodes) {
// replace this with conditioned outputs as needed:
writeFileSync('bundle1.css', styles)
writeFileSync('bundle2.css', styles)
},
]
}
I'm hoping that someone can provide som help or hints for a scenario I have.
I am trying to setup jspm with the following structure:
Appbundle: My own javascripts for my angular app, vill be minified as part of my buildprocess.
Pluginbundle: A bunch of preminified 3rd party libraries that are already minified but need to be concatenated (this would be small standalone 3rd files like a datepicker and select2).
Use globals for larger libraries like angular, moment and jquery so they can be loaded from CDNs.
I've been trying to understand how this is handled in jspm but I can't seem to find any real examples, just.commemts along the line of "just shim them" and "exclude them from sfx".
I've tried both those things, but no matter what I do it seems that jspm bundles all the dependencies in my appbundle.js file which makes it far too big.
Is there anyone that has experience in setting something like this up? Is it even possible in jspm, or will it fight against effiency to make rhings simpler?
Grateful for any hints you can provide.
The solution I could found is to update JSPM to the latest 0.17-beta.
This allow you to use some arguments for the static builder, like --global-deps and --externals which describe dependencies to be excluded form the bundle.
I then load the bundle as a script tag, as well as those external dependencies.
See the guide for JSPM 0.17-beta.
I downloaded an HTML/CSS template online that has it's own CSS file running on top of Bootstrap. There are also some less files that contains mixins and variables. After I change the less variables, what do I need to do have my CSS automatically change?
Links to tutorials, etc, are appreciated.
You can use watch mode, or something like gulp or grunt (see links). They're task runners that will be able to watch your file tree and run tasks based on different changes. Both are really popular, but they each have a different philosophy/paradigm: grunt is more configuration-over-code, while gulp is more code-over-configuration. It just runs generic node modules and makes great use of the streams implemented in Node to achieve concurrency and more-composable tasks.
To compile Less:
lessc [option option=parameter ...] <source> [destination]
Useful Links:
http://gulpjs.com/
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
http://gruntjs.com/
http://gruntjs.com/getting-started
http://lesscss.org/usage/#using-less-in-the-browser-watch-mode
http://lesscss.org/#using-less (general less usage)
There are good instructions on simple ways to do it here:
http://lesscss.org/#using-less
I'm using rails with compass.
When using rails without compass, rails has a css per each controller, which contains things that are only relevant to the views in that controller.
I couldn't get the same behavior with compass, which resulted in having a big monolithic file instead of separate files per controller.
What is the recommended approach to solving that problem?
Rails (since 3.1) does create a css file per controller but it's only for practical code separation, all code assets get compiled into one master file per format (.css, .js..), and this is the best practice 90% of the time.
If you want to use this approach with SCSS or SASS code, just change the file extension to .css.scss or .css.sass (ie: mycontroller.css.scss)
If you want to separate the compiled files per controller (you probably don't need it, so i'd advise that you understand the asset pipeline before doing it), you'll have to implement the custom behavior yourself. take a look here http://guides.rubyonrails.org/asset_pipeline.html
I am searching for a solution on how to implement SASS into an asp.net project. I have searched a lot but have found no example on the web. As far as I know some kind of JavaScript file will be needed in project in order for it to work.
Can anybody please share a sample aspx page with one or two textboxes with SASS applied to it?
Sass is written in Ruby, not JavaScript. There are a few JS compilers, but none of them are official, and none of them should ever be considered for use outside of development.
Outside of Ruby on Rails, there is no integration. You put your source files where appropriate and use the Sass compiler to compile it and place the CSS file into your public directory. Whether you use the command line or an application like Scout is up to you.
I personally use the command line to continuously watch my Sass files as I am working on them, and it only takes a second or 2 to compile (just slightly longer than it takes to alt-tab so I can refresh and see how it looks).