Browserify import/require?

javascript ecmascript-6 browserify
panthro picture panthro · Oct 9, 2015 · Viewed 10.3k times · Source

I'm trying to pick up browserify and have been through a number of examples.

In one example I see the use of 'import':

import 'jquery';

and importing local files with:

import Header from './Header';

but in other examples I see people importing via:

require('./Header');

What is the difference?

Answer

JMM picture JMM · Oct 9, 2015

require() is the Node module system (CommonJS) in ES5. import is ES6 module syntax.

If you want to browserify modules written with ES6 module syntax you'll need to compile them using something like babelify (or babel by other means).

Related questions

How to import jquery using ES6 syntax?

I'm writing a new app using (JavaScript) ES6 syntax through babel transpiler and the preset-es2015 plugins, as well as semantic-ui for the style. index.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from '../dist/…

Read More
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Gulp

Consider the following two files: app.js import Game from './game/game'; import React from 'react'; import ReactDOM from 'react-dom'; export default (absPath) => { let gameElement = document.getElementById("container"); if (gameElement !== null) { ReactDOM.render( <Game mainPath={absPath} />, …

Read More
Exporting a class with ES6 (Babel)

I'm writing some frontend code with ECMAScript 6 (transpiled with BabelJS, and then browserified with Browserify) so that I can have a class in one file, export it and import it in another file. The way I'm doing this is: export …

Read More