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!
