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 specification released in June 2015 [1]
  • Engines gradually implementing new features

[1]:  http://www.ecma-international.org/ecma-262/6.0/

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 --save-dev babel

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel --source-maps --out-dir lib/ src/",
    "test": "mocha test/ --recursive --compilers js:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^1.2.3"
  },
  "devDependencies": {
    "babel": "^5.8.29",
    "chai": "^3.4.0",
    "mocha": "^2.3.3"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel --source-maps --out-dir lib/ src/",
    "test": "mocha test/ --recursive --compilers js:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^1.2.3"
  },
  "devDependencies": {
    "babel": "^5.8.29",
    "chai": "^3.4.0",
    "mocha": "^2.3.3"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel --source-maps --out-dir lib/ src/",
    "test": "mocha test/ --recursive --compilers js:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^1.2.3"
  },
  "devDependencies": {
    "babel": "^5.8.29",
    "chai": "^3.4.0",
    "mocha": "^2.3.3"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel --source-maps --out-dir lib/ src/",
    "test": "mocha test/ --recursive --compilers js:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^1.2.3"
  },
  "devDependencies": {
    "babel": "^5.8.29",
    "chai": "^3.4.0",
    "mocha": "^2.3.3"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel --source-maps --out-dir lib/ src/",
    "test": "mocha test/ --recursive --compilers js:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^1.2.3"
  },
  "devDependencies": {
    "babel": "^5.8.29",
    "chai": "^3.4.0",
    "mocha": "^2.3.3"
  }
}

package.json

{
  "name": "my-es6-project",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel --source-maps --out-dir lib/ src/",
    "test": "mocha test/ --recursive --compilers js:babel/register"
  },
  "main": "lib/my-es6-project.js",
  "dependencies": {
    "core-js": "^1.2.3"
  },
  "devDependencies": {
    "babel": "^5.8.29",
    "chai": "^3.4.0",
    "mocha": "^2.3.3"
  }
}

Writing ES6

  • Use .js extension where possible
  • Maybe .es6 extension for syntax highlighting
  • 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

Publishing to npm

Consuming

  • npm install my-es6-project as usual
  • require('my-es6-project') as usual
  • import 'my-es6-project' for ES6
  • That's it!

Further explorations

  • Publishing transpiled ES6 for the browser
  • On-the-fly transpilation for apps

Questions?

Writing and publishing ES2015 today

By James Allardice

Made with Slides.com

Writing and publishing ES2015 today

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

  • 2,014

More from James Allardice