Using modules downloaded from npm

Question

i have been reading this guide on react where the following paragraph has kind of thrown me.

For a number of good technical reasons CommonJS modules (i.e. everything in npm) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into .js files that you can include in your web page with a tag.

I was under the impression that i could do something like npm install jquery and then in my index.html file reference this through node modules, something like <script src="node_modules/jquery/dist.jquery.js">

Is this not the case, or am I incorrect?

Khiem Tran · Accepted Answer · 2016-09-08 23:36:44Z

1

Yes. You are correct. Jquery is a global module not a commonjs module. For other package that use commonjs module, using import/export statement you need a bundler like browserify to bundle it into a single bundle in order to use it in browser

answered Sep 8, 2016 at 23:36

Khiem Tran

6,16916 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6002037 Over a year ago

ah ok, so if the library has used import/export then you need to use browserify or some other bundler! got it

Kesem David · Accepted Answer · 2016-09-08 23:35:36Z

1

As mentioned in the guide you read, examples for those "bundlers" are webpack/browserify/systemjs/etc..

These are what is called as "module-loaders" which basically loads the modules to the browser when running your applications.

These module-loaders have a configuration file.

So if for example yours is webpack, after you install npm install webpack you'll need to have a webpack.config.js that might look as follows:

module.exports = {
    entry: "./app/boot",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    module: {
        loaders: [
            { test: /\.ts/,   loader: ["ts-loader"], exclude: /node_modules/ },
        ],
        preLoaders: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] }
        ]
    },
    debug: true,
    devtool: 'source-map'
};

answered Sep 8, 2016 at 23:35

Kesem David

2,2653 gold badges30 silver badges48 bronze badges

1 Comment

user6002037 Over a year ago

thanks man! got all that, daniel answered my question, thats where my confusion lay

Frank Bessou · Accepted Answer · 2016-09-08 23:42:31Z

1

When the jquery library is loaded, it verifies if it is being imported by a bundler/loader or by a script tag:

( function( global, factory ) {

"use strict";

if ( typeof module === "object" && typeof module.exports === "object" ) {

    module.exports = global.document ?
        factory( global, true ) :
        function( w ) {
            if ( !w.document ) {
                throw new Error( "jQuery requires a window with a document" );
            }
            return factory( w );
        };
} else {
    factory( global ); // export globally
}
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { /** jQuery definition **/ }

answered Sep 8, 2016 at 23:42

Frank Bessou

6525 silver badges8 bronze badges

Collectives™ on Stack Overflow

Using modules downloaded from npm

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related