Nostalgic Primordial Monster

    @mobilabs/es6pakket

    1.0.7 • Public • Published

    ES6Pakket

    NPM version GitHub last commit Travis CI Test coverage npm bundle size License

    ES6Pakket is a boilerplate for writing ES6 Javascript libraries that run on both Node.js and ECMAScript 2015 (ES6) compliant browsers.

    The build doesn't require a transpiler (like babel) or a builder (like browserify, webpack or rollup) to produce a module that runs in the browser from source files that use import and export statements. It is useful if you want to keep your source code quite pure.

    ES6Pakket relies on Pakket to drastically reduces the amount of extra code added to your library (go to Pakket for details).

    ES6Pakket relies on Mocha and Chai for unitary testing. It relies on Istanbul for code coverage.

    ES6Pakket uses Travis CI for continuous integration and Coveralls.io to display test coverage.

    Nota:
    ES6Pakket is a fork of the boilerplate ES6Kadoo.

    Quick Startup

    You can easily get your first ES6Pakket library running in a couple of minutes by just typing a few command lines. But first, you need to create an empty folder. It will contain your library.

    Then, you just need to create a package.json file that contains:

    {
      "name": "NameOfYourProject",
      "scripts": {
        "create": "npm install @mobilabs/es6pakket && npm run populate",
        "populate": "es6pakket populate --name ${npm_package_name} --author \"${npm_package_writer_name}\" --acronym ${npm_package_writer_acronym} --email ${npm_package_writer_email} --url ${npm_package_writer_url} && npm install && npm run build && npm run test && npm run report"
      },
      "writer": {
        "name": "John Doe",
        "acronym": "jdo",
        "email": "jdo@johndoe.com",
        "url": "http://www.johndoe.com/"
      }
    }

    Replace NameOfYourProject by your project name and fill writer with your credentials.

    And finally, type in the terminal:

    npm run create.

    That's almost all! When the script has been executed, your folder contains the following files:

    Your project Folder
          |_ lib
          |   |_ lib.js           // Your built ES6 module,
          |_ src
          |   |_ ...               // The source files of your library,
          |   |_ ...
          |   |_ ...
          |_ tasks
          |   |_ ...              // The Gulp tasks to build your project,
          |_  test
          |     |_ main.js        // Your Mocha, Chai test file,
          |_ .eslintignore        // Files to be ignored by ESLint,
          |_ .eslintrc            // A Configuration file for the ESLint linter tool (if you use it),
          |_ .gitignore           // Files that Git must ignore (if you use git),
          |_ .travis.yml          // A configuration file for Travis CI (if you use it),
          |_ .CHANGELOG.md        // The changes between your different versions,
          |_ .gulpfile.js         // The main Gulp task,
          |_ index.js             // The link to your ES5 library,
          |_ LICENSE.md           // The license that applies to your library (here MIT),
          |_ package-lock.json    // The NPM dependency tree,
          |_ package.json         // The NPM package file,
          |_ README.md            // Your README file,

    This folder is now a NPM package.

    How to build it

    The file gulpfile.js contains the build instructions. These instructions populate the folder lib from the sources files included in the folder src.

    gulpfile.js implements two operations for the build:

    • the command npm run build creates the library at the execution,
    • and the command npm run watch updates the library when one of the source files is modified.

    How to test it

    Your package.json file contains three scripts to test your UMD library:

    • npm run test,
    • npm run check-coverage,
    • npm run display-coverage.

    npm run test executes the tests and computes the test coverage.

    npm run check-coverage checks if the test coverage matches the requirements. Here 100%.

    npm run display-coverage opens your browser and reports the test coverage.

    How to create a distribution version

    Your package.json file contains a script to build a distribution library:

    • npm run makedist

    The script makedist adds a license header to the library and creates a minified version.

    How to use it

    On Node.js, your project folder is viewed as a NPM package. Choose a working directory outside your project folder, create a folder node_modules and copy your project folder into node_modules. Then, on your terminal, type (at your working directory level):

    node
    > var mylib = require('mylib');
    undefined
    > mylib.getString();
    'I am a string!'
    > mylib.getArray();
    [ '1', '2', '3' ]
    >

    On the browser, pick-up the JS file lib/mylib.js and add it as a script in your HTML file. mylib is an immediately-invoked function expression. It attaches the mylib variable to the current context.

    <!DOCTYPE html>
    <html>
      <body>
        <script src="mylib.js"></script>
        <script>
        	console.log(mylib.VERSION);
        </script>
      </body>
    </html>

    Or,

    <!DOCTYPE html>
    <html>
      <body>
        <script type="module">
          import mylib from './<path_to_the_lib>/mylib.mjs';
    
          console.log(mylib.VERSION);
        </script>
      </body>
    </html>

    Enjoy!

    License

    MIT.

    Keywords

    Install

    npm i @mobilabs/es6pakket

    DownloadsWeekly Downloads

    11

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    120 kB

    Total Files

    35

    Last publish

    Collaborators

    • jclo