Search code examples
reactjsnpmgulpbabeljsgulp-babel

babel and reactjs: how to use es2015 style imports

I'm new to javascript and javascript build scripts, and I'm trying to build a "future-proof" build script for building a ReactJS/Redux app. I'm having trouble with getting imports to work between javascript files.

My question is what is the recommended approach to add support for es2016-style import statements?

As I've been trying to get this working, these are the questions and comments that are rolling around in my head that help color where I'm coming from.

  • I've just been getting a little more comfortable with Gulp. Is it possible to use just Gulp, Babel, and npm to add support for es2016-style import statements?
  • I'm wondering if Gulp still the recommended way to go for building javascript bundles, or should I learn WebPack instead.
  • In the past, I've used to use Browserify for including other javascript files, but I've heard people mention that you can do what Browserify does with pure npm and that Browserify may be falling out of favor.
  • I've noticed a lot of ReactJS examples using WebPack. I'm not sure where WebPack fits in or if it's necessary. I'm wondering if WebPack takes the place of Browserify and if I need WebPack or if I can do without it.
  • I'd prefer to use whatever import syntax is the recommended. I believe that Browserify uses require() and es2015 syntax uses "import ... from". I'm wondering if the "import ... from" is the recommended syntax to use for imports now or if I should be using something else.
  • I've been trying to use Babel 6 to use es2015-style code. I've noticed that it doesn't pre-process the import statements and I think I read somewhere that Babel 6 removed support for import statements. I'm wondering what to use in place of that to pre-process import statements.
  • I'd be interested in minimizing the amount of configuration (dot files and such) to build a basic project.

Below is a simple example that I've been trying to get working, using Gulp. Currently, when Gulp runs, is creates a bundle, but the import statement doesn't seem to work. When I try to load index.html, everything looks concated together and I get javascript errors.

more package.json 

{
  "name": "test_jsx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.14.0",
    "babel-plugin-transform-react-jsx": "^6.8.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-cli": "^1.2.2",
    "gulp-concat": "^2.6.0",
    "gulp-print": "^2.0.1",
    "gulp-sourcemaps": "^1.6.0"
  }
}

more gulpfile.js 

var gulp = require("gulp");
var print = require('gulp-print');
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

const paths = {
   src: 'src/**/*js',
   dest: 'build'
}

gulp.task("default", function () {
  return gulp.src(paths.src)
    .pipe(print())
    .pipe(sourcemaps.init())
    .pipe(babel({ presets: ['react', 'es2015', ]}))
    .pipe(concat("bundle.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

more src/test.js 

// This import statement is what I'm trying to get working.
import { square } from './lib';

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

more src/lib.js 

// This is just a example function that I want to try to import
export function square(x) {
        return x * x;
}

more index.html 

<script src="dist/bundle.js"></script>
TEST

Build steps

npm install 
./node_modules/.bin/gulp
Solution

  • You can use either webpack or browserify to build your bundle, but they'll both be leveraging babel to provide ES6 support. I am not sure where you read that Babel 6 removed the import statement - I use Babel 6 and have had no such issue. You can build the bundle with gulp too but I find it's more work and tends to be harder to maintain. But, you might be getting a lot of opinionated answers here.

    There is a tool that was provided by Facebook recently to bootstrap a React app without having to configure build tools: Create React App. You might want to either try that or one of the available boilerplate starters on Github, unless you like tinkering with build scripts. It's less flexible but if you are looking to reduce the amount of configuration it does the job.