npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wp-quickstart-caller-example

v0.1.4

Published

Usage of webpack-typescript-lib-quickstart.

Downloads

18

Readme

wp-quickstart-caller-example

Usage example of webpack-typescript-lib-quickstart.

npm GitHub release Travis GitHub forks GitHub stars


Features

  • Use and extend webpack-typescript-lib-quickstart library.
    See src/index.ts and src/lib/MathTwo.ts.
  • Extend webpack-typescript-lib-quickstart's stylesheet.
    See src/assets/scss/main.scss.
  • Compile TypeScript source and output as CommonJS format with declaration information and source map.
  • Compile TypeScript source and output as CommonJS format single file with declaration information source map.
    (Declaration information settings are disabled. See tsconfig-webpack-node-dist.json.)
  • Compile TypeScript source and output as AMD format single file with source map.
  • Compile SCSS, auto-prefixing (PostCSS), and output as single CSS file with source map.
  • Run unit tests (jasmine).
  • Include CI configurations (Travis CI, bitbucket pipelines, Wercker, AWS CodeBuild).
  • Include Visual Studio Code debugger and tasks configurations.

Usage (runs on Node)

  1. Fork and clone me.
  2. Edit package informations of package.json.
    Don't remember to change repository url, author, homepage.
  3. Write your code.
  4. and build it.
npm run build
npm test

Usage (runs on browsers)

  1. Fork and clone me.
  2. Edit package informations of package.json.
    Don't remember to change repository url, author, homepage.
  3. Edit webpack.config.js.
    // [Node-single-js-file]: Packing a Node single Javascript file.
    {
        entry: {
            // TODO: YOU SHOULD REPLACE THE LIBRARY OUTPUT NAME!
            <your-output-name>: path.resolve(__dirname, 'src/index.ts')
        },
        output: {
            // TODO: YOU SHOULD REPLACE THE LIBRARY NAME!
            library: '<your-library-name>',
            ...
        },
        module: {
            rules: [{
                test: /\.tsx?$/,
                ...
    
                // TODO: You should add/remove the referenced packages paths.
                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!
                exclude: /node_modules[\/\\](?!(webpack-typescript-lib-quickstart)|(wp-quickstart-caller-example)).*$/
            }, {
                test: /\.jsx?$/,
                ...
    
                // TODO: You should add/remove the referenced packages paths.
                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!
                exclude: /node_modules[\/\\](?!(webpack-typescript-lib-quickstart)|(wp-quickstart-caller-example)).*$/
            }, {
            ...
    },
    
    // [Browser-single-js-file]: Packing a library Javascript file.
    {
        entry: {
            // TODO: YOU SHOULD REPLACE THE LIBRARY OUTPUT NAME!
            <your-output-name>: path.resolve(__dirname, 'src/index.ts')
        },
        output: {
            // TODO: YOU SHOULD REPLACE THE LIBRARY NAME!
            library: '<your-library-name>',
            ...
        },
        module: {
            rules: [{
                test: /\.tsx?$/,
                ...
    
                // TODO: You should add/remove the referenced packages paths.
                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!
                exclude: /node_modules[\/\\](?!(webpack-typescript-lib-quickstart)|(wp-quickstart-caller-example)).*$/
            }, {
                test: /\.jsx?$/,
                ...
    
                // TODO: You should add/remove the referenced packages paths.
                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!
                exclude: /node_modules[\/\\](?!(webpack-typescript-lib-quickstart)|(wp-quickstart-caller-example)).*$/
            }, {
            ...
    },
    
    // Packing a library CSS file.
    {
            ...
            // TODO: You should add/remove the referenced packages assets paths.
            alias: {
                "../images": "webpack-typescript-lib-quickstart/src/assets/images"
            },
            ...
    
            ...
            // TODO: You should add/remove the referenced packages assets paths.
            includePaths: [
                path.resolve("./node_modules/webpack-typescript-lib-quickstart/src/assets/scss")
            ],
            ...
    }
  4. Write your code.
  5. and build it.
    npm run build
    npm test
  6. Deploy dist/<your-library-name>.min.js.

Usage (Compile SCSS Stylesheets to single CSS file)

  1. Fork and clone me.
  2. Edit package informations of package.json.
    Don't remember to change repository url, author, homepage.
  3. Write your code.
  4. and build it.
    npm run build
  5. Deploy dist/style.min.css.

Debugging with Webpack

  1. npm run watch
  2. Run debbuger.
  3. Fix anything and save it.
  4. Go back to line 2.

Directory structure

  • /bin/ : Output directory of Node module javascript file (CommonJS) that build with tsc.
  • /bin/index_single.js : Node module javascript single file (CommonJS) that build+packed by Webpack.
  • /dist/ : Output directory of distribution javascript file (AMD ; for browsers) and stylesheet file that build+packed by Webpack.
  • /declarations/ : Output directory of TypeScript declaration.
  • /spec/ : Directory of jasmine configurations.
  • /src/index.ts : Library main file.
  • /src/app.ts : Debugger entry point file.
  • /src/lib/ : Directory of library program codes.
  • /src/spec/ : Directory of unit test codes. We use jasmine.
  • /src/assets/scss/ : Directory of stylesheet source.
  • /src/assets/ : Assets requiring from example code (lib/AssetsLoader) that packed to JS file by Webpack.
  • /src/views/ : Assets requiring from example code (lib/AssetsLoader) that packed to JS file by Webpack.
  • /.babelrc : Babel configuration.
  • /.gitignore : git ignore list.
  • /.npmignore : NPM ignore list.
  • /package.json : NPM package configuration.
  • /tsconfig.json : TypeScript compiler options for Node module output. it also uses for IDEs' error checking and coding assistance.
  • /tsconfig-webpack-node.json : TypeScript compiler options for Node module single file output.
  • /tsconfig-webpack-dist.json : TypeScript compiler options for distribution single file output.
  • /webpack.config.js : Webpack2 build configuration.
  • /.travis.yml : Travis CI test and deploying pipeline configuration.
  • /bitbucket-pipelines.yml : bitbucket pipelines test and deploying pipeline configuration.
  • /bitbucket-heroku-deploy.sh : bitbucket test and deploying pipeline helper shell script.
  • /wercker.yml : Wercker test and deploying pipeline configuration.
  • /buildspec.yml : AWS CodeBuild test and deploying pipeline configuration.
  • /buildspec-heroku-pre-deploy.sh : AWS CodeBuild test and deploying pipeline helper shell script.
  • /buildspec-heroku-deploy.sh : AWS CodeBuild test and deploying pipeline helper shell script.

NPM scripts

  • build : Build for production.
  • rebuild : Clean all output and build for production.
  • build:node:dev : Build Node module output (CommonJS) for develop.
  • build:node:prod : Build Node module output (CommonJS) for production.
  • build:dist:dev : Build distribution output (AMD) for develop.
  • build:dist:prod : Build distribution output (AMD) for production.
  • clean : Clean all output.
  • test : Run unit tests.
  • start : Run codes for debugging (bin/app.js).
  • watch : Build distribution output and watch continuously.

License

MIT