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.

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.