Using ES2015 Code in Your PhoneGap Plugins

Everyone loves the new hotness of ES2015 features but sadly not all of the devices your app is going to run on are able to take advantage of all the features of ES2015. Luckily we can use Babel to transpile our ES2015 code into ES5 code that will run everywhere. This way we can write our plugin's JS using the new hotness but still run everywhere.

I've started working on a version of the PhoneGap Push Plugin in the es6 branch that uses ES2015 and what follows is a description of how I set it up.

Step 1: Add the necessary packages to package.json

We need to add Babel to our package.json so open the file and add the following lines.

  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-preset-es2015": "^6.9.0"
  }

Then run the command:

npm install

Step 2: Create a .babelrc file

We'll have to tell babel how we want the code transpiled from ES2015 to ES5. So create a new file called .babelrc in the root of your plugin project and populate it with the following lines:

{
  "presets": [
    "es2015"
  ]
}

Step 3: Write your ES2015 code

I like to add a new directory under the src folder called src/js. It is in this folder that I like to keep my ES2015 compliant code.

Step 4: Transpile your code

Once your ES2015 code is written it is time to transpile it to ES2015 so you can publish to NPM and Github. For this open package.json and add a new line to the scripts section:

  "scripts": {
    "build": "babel src/js --out-dir www",
  }

Now if you run the command:

npm run build

You will find your transpiled code in the www folder of your plugin.

Step 5: Link to the ES5 code in plugin.xml

It is key that you don't actually deliver the ES2015 code as part of the plugin as you want to make sure your users are executing the ES5 version. To do that open plugin.xml and make sure that your js-module tag refers to code in the www directory like:

<js-module name="PushNotification" src="www/push.js">
  <clobbers target="PushNotification">
</clobbers></js-module>

and not:

<js-module name="PushNotification" src="js/src/push.js">
  <clobbers target="PushNotification">
</clobbers></js-module>

Bonus Material

If you are anything like me, writing ES2015 code is not quite second nature yet. In order to help me along I setup my project to be linted automatically.

Step 1: Add the necessary packages to package.json

We need to add ESLint to our package.json so open the file and add the following lines.

  "devDependencies": {
    "babel-eslint": "^6.1.0",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.9.2",
    "eslint-plugin-jsx-a11y": "^1.5.3",
    "eslint-plugin-react": "^5.2.2"
  }

Then run the command:

npm install

Step 2: Create a .eslintrc file

We'll have to tell ESLint how we want the code linted. So create a new file called .eslintrc in the root of your plugin project and populate it with the following lines:

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "experimentalObjectRestSpread": true
  },
  "rules": {
    "spaced-comment": 0,
    "no-console": 0,
    "no-unused-expressions": [2, { "allowShortCircuit": true }]
  },
  "env": {
      "node": true,
      "mocha": true,
      "browser": true
  }
}

Step 3: Setup Your Editor

Not sure what editor you are using to write JS but I'm using Atom at the moment so I have installed the linter-eslint package which automatically picks up my .eslintrc file and lints my code on the fly.

Happy ES2015 coding everyone!