Writing and publishing ES2015 today

James Allardice

@james_allardice

http://mammal.io

ES2015?

  • New name for latest version of ECMAScript spec
  • Still commonly known as ES6
  • Final draft released in April 2015 [1]
  • Engines gradually implementing new features

[1]:  http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

https://twitter.com/awbjs/status/584090541685514240

Transpilation

  • Convert ES6 into valid ES5
  • Source-to-source compilers
  • Babel and Traceur
  • Babel is winning the race [1]

[1]:  https://kangax.github.io/compat-table/es6/

Getting started

  • Keep source and transpiled code separate
  • Common convention is src/ and lib/
  • Keep lib/ out of source control
  • npm install -g babel

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel -sd lib/ src/",
    "test": "mocha test/ -R spec --recursive --compilers es6:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^0.8.4"
  },
  "devDependencies": {
    "babel": "^5.1.10",
    "chai": "^2.1.2",
    "mocha": "^2.0.1"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel -sd lib/ src/",
    "test": "mocha test/ -R spec --recursive --compilers es6:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^0.8.4"
  },
  "devDependencies": {
    "babel": "^5.1.10",
    "chai": "^2.1.2",
    "mocha": "^2.0.1"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel -sd lib/ src/",
    "test": "mocha test/ -R spec --recursive --compilers es6:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^0.8.4"
  },
  "devDependencies": {
    "babel": "^5.1.10",
    "chai": "^2.1.2",
    "mocha": "^2.0.1"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel -sd lib/ src/",
    "test": "mocha test/ -R spec --recursive --compilers es6:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^0.8.4"
  },
  "devDependencies": {
    "babel": "^5.1.10",
    "chai": "^2.1.2",
    "mocha": "^2.0.1"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel -sd lib/ src/",
    "test": "mocha test/ -R spec --recursive --compilers es6:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^0.8.4"
  },
  "devDependencies": {
    "babel": "^5.1.10",
    "chai": "^2.1.2",
    "mocha": "^2.0.1"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel -sd lib/ src/",
    "test": "mocha test/ -R spec --recursive --compilers es6:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^0.8.4"
  },
  "devDependencies": {
    "babel": "^5.1.10",
    "chai": "^2.1.2",
    "mocha": "^2.0.1"
  }
}

Writing ES6

  • Use .es6 extention for GitHub
  • Only use a standard library polyfill if necessary
  • Many ES6 guides available [1]

[1]:  https://github.com/lukehoban/es6features

Publishing to npm

  • Use a prepublish script
  • Widely used already for e.g. CoffeeScript
  • Add an .npmignore file to exclude src/ 
{
  ...
  "scripts": {
    "compile": "babel -sd lib/ src/",
    "prepublish": "npm run compile",
    "test": "mocha test/ -R spec --recursive --compilers es6:babel/register"
  },
  ...
}

package.json
src/
.npmignore

Further explorations

  • Publishing transpiled ES6 to Bower
  • On-the-fly transpilation for apps

Questions?

Copy of Writing and publishing ES2015 today

By Mike Harris

Source: James Allardice

Copy of Writing and publishing ES2015 today

An exploration into how you can start writing and publishing ES6 modules to npm right now.

  • 337

More from Mike Harris