GithubHelp home page GithubHelp logo

tb / ng-conf-library Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ocombe/ng-conf-library

0.0 2.0 0.0 14 KB

How to create a library for Angular 2 - ng-conf 2016

License: MIT License

JavaScript 85.99% TypeScript 14.01%

ng-conf-library's Introduction

How to create a library for Angular 2 - ng-conf 2016

1. Init the project

  • Create a repository on Github:

    • Use the name of your library
    • Init with a readme, a license (MIT), and a .gitignore file (type node)
  • Git clone that repository locally

  • Go to that repository and type npm init // Video

    • For the name of your library: no spaces, no special characters (except dashes & underscore) and all in lowercase
    • Give the name of your library to the main file. Example: my-lib.js
    • Don't bother with the test command for now
  • Install the dev dependencies for Angular 2: npm install -D @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic es6-shim@^0.35.0 es6-promise@^3.0.2 [email protected] [email protected] zone.js@^0.6.12 (-D means save in package.json as a dev dependency)

  • Add Angular 2 as a peer dependency in your package.json file

"peerDependencies": {
  "@angular/common": "^2.0.0-rc.0",
  "@angular/compiler": "^2.0.0-rc.0",
  "@angular/core": "^2.0.0-rc.0",
  "@angular/platform-browser": "^2.0.0-rc.0",
  "@angular/platform-browser-dynamic": "^2.0.0-rc.0"
}

2. Write a service

  • Create a folder named src
  • In this folder add a Typescript file for your service, the name of the file doesn't matter
  • Write a simple service (don't forget to export it) // Video
  • Create a main Typescript file at the root named after your library and export * from your library // Video

3. Typescript & typings

  • Install Typescript & typings: npm install -D typescript typings
  • Create 2 file at the root named tsconfig.json & typings.json
  • In tsconfig.json write:
{
  "compilerOptions": {
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "inlineSourceMap": true,
    "inlineSources": true,
    "declaration": true,
    "moduleResolution": "node"
  },
  "files": [

  ]
}
  • In typings.json write:
{
  "ambientDevDependencies": {
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4"
  },
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
    "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#aee0039a2d6686ec78352125010ebb38a7a7d743"
  }
}
  • In the file tsconfig.json edit the files property and add the following (rename ng-conf-library with the name of your lib): // Video
"./typings/main.d.ts",
"./ng-conf-library.ts",
"./src/service.ts"
  • In package.json add a prepublish script with typings install && tsc // Video
  • Test that script with the command npm run prepublish // Video
  • Add a typings property in your package.json and add it the name of your main typings file (extension .d.ts) that was just created by your prepublish script // Video

4. Tests

  • Install karma & its dependencies: npm install -D karma karma-phantomjs-launcher phantomjs-prebuilt karma-jasmine [email protected] jasmine-core systemjs
  • Create a file named karma.conf.js and copy the content of this file in it
  • Create a file named karma-test-shim.js and copy the content of this file in it
  • Create a test folder and create a file named service.spec.ts
  • Add this new file to the files property of tsconfig.json // Video
  • Edit the test script of package.json and type tsc && karma start // Video
  • Write some tests // Video
  • Run the tests with npm test // Video

5. Publish

  • Create a file .npmignore and copy the content of .gitignore in it
  • Fix .gitignore to avoid the commit of generated files. Add the following at the end:
# Generated #
*.js
!karma.conf.js
!karma-test-shim.js
*.map
*.d.ts
typings
  • Fix .npmignore to avoid publishing the Typescript files & the test files. Add the following at the end:
# Dev #
*.ts
!*.d.ts
tests
karma.conf.js
karma-test-shim.js
  • Update the prepublish script in package.json to run your tests with typings install && npm test
  • Check the version and publish your library with npm publish !

ng-conf-library's People

Contributors

ocombe avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.