Is there a way to not extract CSS files with rollup?
Current:
|-assets
|--main.css
|--main.js
Desired:
|-assets
|--main.js
Where main.js imports css. I see this working with Vite client where the main js entry file imports CSS and it works in the browser. It's not obvious to me how but I'm wondering if this is an option.
Related
I start learning webpack , node , and react and I am bit confused about some basic staff.
Does webpack bundle whole react.js + my javascript files into one output file, so when deploying to production I don't need to install node packages used in project (assuming that they are added to webpack.config.js file) ?
If above is right:
On my server I just need to place index.html + output from
webpack ( bundle.js) ? ( In simple scenario) ?
package.json will be used only on development side ?
You only need index.html and the bundle.js (or any name you gave the file) for the app to work, provided that you are not using any local assets. You don't need to include node modules. Package.json should tell you what to include in your project so that you don't have to include node modules whenever you want to upload your project along with few other decalarations.
The way Webpack works is that you specify one or more entry points and one or more output files. Webpack then reads the entry point and also traverses through the import / require statements recursively. It then generates final bundle file(s) which includes all the traversed files.
Yes, Webpack outputs everything in the the bundle.js file(s). You can configure multiple output bundles. So, you just need HTML and output bundle to deploy the app.
The package.json specifies the packages upon which the app depends, apart from several other things. While traversing through the entry points, webpack will also include the packages specified in import / require. Function of package.json is to tell npm to install those packages.
I'm trying to include a javascript file which is not available as bower.
So I copied it to src/main/webapp/content and referenced in index.html
In the DEV profile all is fine -- it works.
Now, after generating WAR file with the PROD profile, the custom.js file is not included in the WAR (tried to unpack -- file is not there).
I have discovered the gulp is merging all css and js files, did I miss a config for this?
When the app is loaded, the browser complains with 404 in the index.html -- js file not found.
How can I fix this? What is the right way to include JS (or CSS) file into JHipster app?
Thank you.
JS are not expected to be in content folder.
For CSS, copy your file to src/main/webapp/content/css.
For JS, copy your file to src/main/webapp/app possibly in a dedicated sub folder.
You don't have to inject them in index.html, gulp will do it for you. I suppose you did not see it in dev profile because you were not running gulp serve as explained in the doc
Ive just published my first package (a react component) to npm but im having some trouble understanding the difference between what the lib directory is compared to the dist.
Currently I generate both lib and dist however my package "main" points to the dist unminified js file which has been built using webpack and output as UMD. The lib folder is built using babel taking the src and outputting to lib.
The dist folder contains both [unminified/minified].js files as well as [unminified/minified].css files.
My main confusion is with the lib folder since imports from there currently wouldn't work seeing as I just transform src -> lib meaning the scss references are still there and the scss files aren't transformed either.
I use CSS Modules (css-loader, styles-loader, postcss-loader etc) to generate my CSS files and this is where the confusion is since, wouldn't I also need to use webpack to generate my lib folder seeing as the scss files/import references need to be transformed to css?
Are you meant to have both lib and dist or is the UMD build in dist fulling the same purpose as that of having a lib folder?
If you are supposed to have both how would I achieve this, since I couldnt find any info regarding generating the lib folder when using CSS modules within your js files and still maintaing the same folder structure of that of src (while still generating dist)?
Usually the dist folder is for shipping a UMD that a user can use if they aren't using package management. The lib folder is what package.json main points to, and users that install your package using npm will consume that directly. The only use of the lib as opposed to src is to transform your source using babel and webpack to be more generally compatible, since most build processes don't run babel transforms on packages in node_modules.
As far as handling the style imports, it's probably a good idea to not import scss or css files in your source js that you export. This is because node can't import styles like that by default. If you have an example that demos your component, it makes sense to import the styles there. The common pattern is to publish minified and unminified css in the dist folder, and in your documentation tell the consumer to explicitly import the css file using whatever technique they prefer. I took this approach with redux bug reporter if you need an example. Hope that helps!
In general lib refers to libraries that are included in a package, dist on the other hand are distribution files for your project. As an example you could write a bunch of javascript and include jquery (which is a lib) and then when they're all bundled up you have a single dist file.
Ok think I found out how to do this. There is a babel plugin that allows you to use webpack loaders when running babel (babel-plugin-webpack-loaders). Thus my CSS mapping is inlined within the js file and the mapping hashes used are also the same as that used when building dist. Yay!
I want to publish an angular 2 component on NPM. This component use css which refer to some fonts. As far as publishing .ts files I can do that. But I'm lost concerning the css and the fonts.
I have :
despotic-turtle.component.ts
despotic-turtle.component.css
fonts/font.ttf .svg ...
and I have in my css this:
#font-face {
font-family: 'despotic-turtle';
src: url('despotic-turtle/fonts/font.eot?ggipqk');
/* ....*/
}
I can't leave the css and fonts as is, so what can be done ?
css, fonts and html will be included in your npm publish.
The issue you'll encounter will be that the referenced css will not be found unless you add moduleId in #Component:
#Component({
moduleId: module.id
})
Note that you'll have to compile using commonjs to make this work.
Also, you shouldn't publish the .ts files to npm, the only files you should publish are index.js and your-component.js + your-component.css + your-component.html, .d.ts files and font files.
Keep in mind that npm is used to publish transpilled files only, when you import a library, you should not have to compile it (check #angular libraries, there's no ts in their libraries).
I noticed that Bootstrap and Normalize.css both have a "style" field in their package.json.
Why do they have this? If I had to guess, it's to allow users to import the defined stylesheet as easily as doing require('bootstrap'), but that doesn't seem to be the case.
From Techwraith's pull request that added it to Bootstrap:
Many modules in npm are starting to expose their css entry files in
their package.json files. This allows tools like npm-css,
rework-npm, and npm-less to import bootstrap from the
node_modules directory. [...]
It's actually not written anywhere but in the code for these modules
right now. We're hoping to get this standardized at some point, but
we've all reached this convention separately, so I'm inclined to just
go with it. [...]
If you want to read about this style of css development, I wrote a
thing:
http://techwraith.com/your-css-needs-a-dependency-graph-too/
There's also support in other tools, such as the browserify plugin parcelify:
Add css to your npm modules consumed with browserify.
Just add a style key to your package.json to specify the package's css file(s). [...]
Parcelify will concatenate all the css files in the modules on which
main.js depends -- in this case just myModule.css -- in the order
of the js dependency graph, and write the output to bundle.css.