When I use bower to install Jquery in my node project,the tree
structure of files that get created is as depicted in below image[/bower_components/jquery].
I use .js files in "dist" folder to include in my ejs views.
But I do not know the purpose of "src" folder , when and where it should be used.
src contains the library's source code. You only need it if you want to compile jQuery yourself.
Related
I am used to using NPM packages with Webpack, but I'm wondering how you're supposed to use NPM packages without Webpack.
I know how to install packages. I just don't know how to use them, since you can't just import modules in plain js.
Webpack compiles a bunch of javascript files and combines them into a single one for web distribution. NPM downloads javascript files through packages.
Here's some scenarios where you might use NPM without webpack
You are doing Node.js server-side javascript development. There's no webpack here
You are using a webpack alternative like rollup or browserify
You directly do anything else with the files npm downloads. Maybe you concatenate, throw them in a Makefile or maybe you expose node_modules directly to the world and reference their full paths directly.
Most of my web and server-side development is without webpack.
Why you can't import in plain js?
If you correctly define the package entry point like
"main": "dist/index.js",
"module": "dist/index.js",
Those files can be plain ES6 javascript with named exports or export default, and you can import them after intalling your package with regular import.
You don't need webpack nor babel to make an mpm module. Just put in any folder the files you want to distribute, specifying the main entry point and export elements on that file.
Now... in an angular or react application for example, they may install your component and will use babel and webpack to first transpile your component to ES5 with babel, and then bundle your code together with the rest of their app using webpack.
For front-end, not node.js but still NPM modules.
HTML can import directly ES6 modules but the file must be in .mjs format and provide export default, Module.exports in regular .js file wont't work. This is not a common thing and you'll run into problems if there are subdependencies that don't use ES6 modules. If you find a module that supports it. i.e. some-module
npm install some-module
And in the same directory next to node_modules create index.html pointing straight to the modular bundle
<h1>I'm HTML</h1>
<script type="module">
import SomeModule from './node_modules/some-module/bundle.mjs';
const mod = new SomeModule();
mod.doStuff();
</script>
Here's an article about this https://medium.com/passpill-project/files-with-mjs-extension-for-javascript-modules-ced195d7c84a
npm init
To create a package.json file
npm install --save <package>
To install a package and save it in the package.json file
I tryed to use css frameworks lots of times. But i cant found any guide what to do. Just some post from other developers. Can you help me with the guide, how to import and use css framework in my expressjs project.
For instance, i started new project with express generator:
express --view=pug --css=sass
next, i installed materialize
npm install materialize-css
What i must to do next??? How to connect js and sass files with my project? How to compile all, if i tryed to do just a website? Where i can find good guides about such things, if i will have more questions?? Thanks!
npm was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify, webpack,etc), it has a bit grown up.
In fact, you can even download Bootstrap on npm, that is not a server side framework. Browserify permits you to use AMD/RequireJS/CommonJS on client side so node modules can be used on client side. Same goes for Webpack module bundler.
If you npm install bootstrap (if you don't use grunt or gulp file to move to a dist folder), your bootstrap will be located in some location like below.
"./node_modules/bootstrap/bootstrap.min.css"
You need to include this in your .html file.
For sass if you use grunt then you will be using this plugin grunt-sass to convert sass to css and add the destination file to the .html file. Similarly goes for gulp.
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!
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.
I'm currently learning node.js.
I'd like to create a module named 'bio' that would contain some native C++ extensions and some javascript code.
I've generated a simple "package.json" file with npm init in the root directory and my c++ sources in the src/ folder. The C++ file is compiled to /build/extension.node .
/package.json
/build/extension.node
/src/extension.cpp
Where should I put the javascript files ?
how should I tell node that my javascript files are part of the 'bio' package ?
how should I set the $NODE_PATH ?
Thanks
The javascript files are commonly put to ./lib/. Check small NPM packages such as dirty or request for examples.
To tell node the package name put package.json and other files to a bio folder.
You should not set NODE_PATH. You should rely on node_modules convention instead.
Read http://nodejs.org/docs/latest/api/modules.html#modules_folders_as_modules and related documentation.