Make ecmascript package work with npm packages - how?

packages
1

I’ve moved some of our components over to npm and been using es6, which breaks for production with js minifiers because the es6 is not being parsed. I am not sure if this is something that should be addressed by the package or do I have to incorporate an es6 compiler in the npm package itself?

1 Like
2

Yes, you do. I’m probably the wrong person to give advice here - I have yet to publish my library to NPM. However, I have got the install part working.

I mentally split an NPM package up into 3 parts - configuration, source and object.

Configuration includes the package.json and node_modules.

Source is the ES6 (or whatever) code in whatever folder structure works for you. I create a folder called src/ as the root of this (that seems to be a general convention).

Object is the transpiled, ES5 code built from src/. I create a folder called lib/ as the root of this (also seems to be a general convention). Note that if you don’t create this folder, the install phase will do it for you:

package_root/
    lib/
    src/
    package.json

I also add a docs/ folder to the package root, and there may be other files and folders (.gitignore, jsconfig.json, etc).

My package.json currently looks like this:

{
  "name": "myPackageName",
  "version": "1.1.0",
  "description": "My Package Description",
  "main": "./obj/myPackage.js",
  "scripts": {
    "prepublish": "babel src/ --out-dir lib/",
    "test": "mocha lib/tests/",
    "lint": "eslint ./src/myPackage.js",
    "pretest": "npm run prepublish --silent"
  },
  "eslintConfig": {
    "plugins": [
      "meteor"
    ],
    "extends": [
      "airbnb/base",
      "plugin:meteor/guide"
    ],
    "rules": {}
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/myName/myPackage.git"
  },
  "keywords": [
    "meteor",
    "reactive"
  ],
  "author": "My Name <myname@somewhere.com> (https://github.com/myName/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/myName/myPackage/issues"
  },
  "homepage": "https://github.com/myName/myPackage#readme",
  "dependencies": {
    "babel-runtime": "^5.8.25",
    "lodash": "^4.8.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.7.5",
    "babel-preset-es2015": "^6.6.0",
    "chai": "^3.5.0",
    "eslint": "^2.7.0",
    "eslint-config-airbnb": "^6.2.0",
    "eslint-plugin-meteor": "^3.4.0",
    "eslint-plugin-react": "^4.2.3",
    "mocha": "^2.4.5",
  }
}

Then, I can use npm lint, npm test etc. When I run npm install, the prepublish hook is called, which compiles everything under src/ into matching folders under lib/. That is the ES5 code, which is referenced in package.json as the main module ("main": "./obj/myPackage.js") - that’s the thing which gets built into your project.

I haven’t been back to this in a few weeks, so my structure may not follow current best practices, but at the time it worked for me!

YMMV :slight_smile:

Long live isobuild!

1 Like
3

Thanks a lot for the details! I’ve already started doing a gulp task on prepublish now with our (polymer) components. For anyone interested in that: I’m using gulp to first use crisper to split the html and js part of the component, then use babel to compile.

Will investigate further how to optimize and take your process as a reference :slight_smile:

1 Like