{"id":15163190,"url":"https://github.com/shellyln/webpack-typescript-lib-quickstart","last_synced_at":"2025-09-30T17:31:21.793Z","repository":{"id":74004379,"uuid":"93216887","full_name":"shellyln/webpack-typescript-lib-quickstart","owner":"shellyln","description":"[DEPRECATED] Quickstart project scaffolding for TypeScript library that runs on browsers and/or Node build with Webpack 2.","archived":true,"fork":false,"pushed_at":"2017-06-23T23:01:18.000Z","size":174,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-15T01:38:42.208Z","etag":null,"topics":["ci","getting-started","node","postcss","quickstart","scaffolding","scss","starter","starter-template","typescript","webpack","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shellyln.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-03T02:00:10.000Z","updated_at":"2024-02-26T19:18:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"c018735e-f58e-4adf-82f1-b45d4c616018","html_url":"https://github.com/shellyln/webpack-typescript-lib-quickstart","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"1b060e1f8b20d3e06ed3f7bee19fd25cfc3e76d3"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fwebpack-typescript-lib-quickstart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fwebpack-typescript-lib-quickstart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fwebpack-typescript-lib-quickstart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fwebpack-typescript-lib-quickstart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shellyln","download_url":"https://codeload.github.com/shellyln/webpack-typescript-lib-quickstart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234760689,"owners_count":18882576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ci","getting-started","node","postcss","quickstart","scaffolding","scss","starter","starter-template","typescript","webpack","webpack2"],"created_at":"2024-09-27T02:20:39.983Z","updated_at":"2025-09-30T17:31:16.506Z","avatar_url":"https://github.com/shellyln.png","language":"JavaScript","readme":"# webpack-typescript-lib-quickstart\nQuickstart project for TypeScript library that runs on browsers and/or Node build with Webpack2.\n\n[![npm](https://img.shields.io/npm/v/webpack-typescript-lib-quickstart.svg)](https://www.npmjs.com/package/webpack-typescript-lib-quickstart)\n[![GitHub release](https://img.shields.io/github/release/shellyln/webpack-typescript-lib-quickstart.svg)](https://github.com/shellyln/webpack-typescript-lib-quickstart/releases)\n[![Travis](https://img.shields.io/travis/shellyln/webpack-typescript-lib-quickstart/master.svg)](https://travis-ci.org/shellyln/webpack-typescript-lib-quickstart)\n[![GitHub forks](https://img.shields.io/github/forks/shellyln/webpack-typescript-lib-quickstart.svg?style=social\u0026label=Fork)](https://github.com/shellyln/webpack-typescript-lib-quickstart/fork)\n[![GitHub stars](https://img.shields.io/github/stars/shellyln/webpack-typescript-lib-quickstart.svg?style=social\u0026label=Star)](https://github.com/shellyln/webpack-typescript-lib-quickstart)\n\n---\n\n### Features\n* Compile TypeScript source and output as CommonJS format with declaration information and source map.\n* Compile TypeScript source and output as CommonJS format single file with declaration information source map.  \n  (Declaration information settings are disabled. See tsconfig-webpack-node-dist.json.)\n* Compile TypeScript source and output as AMD format single file with source map.\n* Compile SCSS, do auto-prefixing (PostCSS), and output as single CSS file with source map.\n* Run unit tests ([jasmine](https://jasmine.github.io/)).\n* Include CI configurations\n  ([Travis CI](https://travis-ci.org/),\n   [bitbucket pipelines](https://www.atlassian.com/software/bitbucket/features/pipelines),\n   [Wercker](http://www.wercker.com/),\n   [AWS CodeBuild](https://aws.amazon.com/codebuild/)).\n* Include Visual Studio Code debugger and tasks configurations.\n\n\n\n\n# Usage (Starting your library project)\n1. Fork and clone me.\n1. Edit package informations of `package.json`.  \n   Don't remember to change repository url, author, homepage.\n1.  Edit library name and output file name of `webpack.config.js`.  \n    ```javascript\n    // [Node-single-js-file]: Packing a Node single Javascript file.\n    {\n        entry: {\n            // TODO: YOU SHOULD REPLACE THE LIBRARY OUTPUT NAME!\n            \u003cyour-output-name\u003e: path.resolve(__dirname, 'src/index.ts')\n        },\n        output: {\n            // TODO: YOU SHOULD REPLACE THE LIBRARY NAME!\n            library: '\u003cyour-library-name\u003e',\n            ...\n        },\n        module: {\n            rules: [{\n                test: /\\.tsx?$/,\n                ...\n\n                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!\n                // exclude 'node_module' directory except myself (refered from other packages)\n                exclude: /node_modules[\\/\\\\](?!webpack-typescript-lib-quickstart).*$/\n            }, {\n                test: /\\.jsx?$/,\n                ...\n\n                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!\n                // exclude 'node_module' directory except myself (refered from other packages)\n                exclude: /node_modules[\\/\\\\](?!webpack-typescript-lib-quickstart).*$/\n            }, {\n            ...\n    },\n\n    // [Browser-single-js-file]: Packing a library Javascript file.\n    {\n        entry: {\n            // TODO: YOU SHOULD REPLACE THE LIBRARY OUTPUT NAME!\n            \u003cyour-output-name\u003e: path.resolve(__dirname, 'src/index.ts')\n        },\n        output: {\n            // TODO: YOU SHOULD REPLACE THE LIBRARY NAME!\n            library: '\u003cyour-library-name\u003e',\n            ...\n        },\n        module: {\n            rules: [{\n                test: /\\.tsx?$/,\n                ...\n\n                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!\n                // exclude 'node_module' directory except myself (refered from other packages)\n                exclude: /node_modules[\\/\\\\](?!webpack-typescript-lib-quickstart).*$/\n            }, {\n                test: /\\.jsx?$/,\n                ...\n\n                // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!\n                // exclude 'node_module' directory except myself (refered from other packages)\n                exclude: /node_modules[\\/\\\\](?!webpack-typescript-lib-quickstart).*$/\n            }, {\n            ...\n    },\n    ```\n1. Write your code.\n1. and build it.  \n   ```sh\n   npm run build\n   npm test\n   ```\n\n\n\n\n# Calling from your other Node project (runs on Node)\n1. Install me:  \n   ```sh\n   npm install --save-dev webpack-typescript-lib-quickstart\n   ```\n1. Import something:  \n   ```javascript\n   import {MathExt} from \"webpack-typescript-lib-quickstart/MathExt\";\n   ```\n1. and use:  \n   ```javascript\n   console.log(new MathExt().add(1, 2));\n   ```\n1. Build it (if you need transpiling).\n\nSee [example](https://github.com/shellyln/wp-quickstart-caller-example).\n\n\n\n\n# Calling from your other Node project (runs on browsers)\n1. Install me:  \n   ```sh\n   npm install --save-dev webpack-typescript-lib-quickstart\n   ```\n1. Import something:  \n   ```javascript\n   import {MathExt} from \"webpack-typescript-lib-quickstart/MathExt\";\n   ```\n1. and use:  \n   ```javascript\n   console.log(new MathExt().add(1, 2));\n   ```\n1. Build it by Webpack or packagers you prefer.\n\nSee [example](https://github.com/shellyln/wp-quickstart-caller-example).\n\n\n\n\n# Calling from old-fashioned script file\n1. Clone me:  \n   ```sh\n   git clone shellyln/webpack-typescript-lib-quickstart.git\n   ```\n1. Build me:\n   ```sh\n   npm run build\n   npm test\n   ```\n1. Copy `dist/awesomemylib.min.js` and `dist/awesomemylib.min.js.map` to your site.\n1. and use:\n\napp.html\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    require.config({\n        baseUrl: \".\",\n        paths: {\n            // Don't add extension \".js\".\n            AwesomeMyLibrary: \"path/to/awesomemylib.min\"\n        }\n    });\n    require([\"app\"]);\n\u003c/script\u003e\n```\n\napp.js\n```javascript\nrequire([\"AwesomeMyLibrary\"], function(AwesomeMyLibrary) {\n    console.log(new AwesomeMyLibrary.MathExt().add(1, 2));\n    new AwesomeMyLibrary.AssetsLoader().load();\n});\n```\n\n\n\n\n# Compile SCSS Stylesheets to single CSS file.\n1. Clone me:  \n   ```sh\n   git clone shellyln/webpack-typescript-lib-quickstart.git\n   ```\n1. Build me:\n   ```sh\n   npm run build\n   npm test\n   ```\n1. Copy `dist/style.min.css` and `dist/style.min.css.map` to your site.\n1. and use:\n\napp.html\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"path/to/style.min.css\"\u003e\n\u003c/head\u003e\n```\n\n\n\n\n# Debugging with Webpack\n1. `npm run watch`\n1. Run debbuger.\n1. Fix anything and save it.\n1. Go back to line 2.\n\n\n\n\n# Directory structure\n* /bin/ : Output directory of Node module javascript file (CommonJS) that build with tsc.\n* /bin/index_single.js : Node module javascript single file (CommonJS) that build+packed by Webpack.\n* /dist/ : Output directory of distribution javascript single file (AMD ; for browsers) and stylesheet single file that build+packed by Webpack.\n* /declarations/ : Output directory of TypeScript declaration.\n* /spec/ : Directory of [jasmine](https://jasmine.github.io/) configurations.\n* /src/index.ts : Library main file.\n* /src/app.ts : Debugger entry point file.\n* /src/lib/ : Directory of library program codes.\n* /src/spec/ : Directory of unit test codes. We use [jasmine](https://jasmine.github.io/).\n* /src/assets/scss/ : Directory of stylesheet source.\n* /src/assets/ : Assets requiring from example code (lib/AssetsLoader) that packed to JS file by Webpack.\n* /src/views/ : Assets requiring from example code (lib/AssetsLoader) that packed to JS file by Webpack.\n* /.babelrc : Babel configuration.\n* /.gitignore : git ignore list.\n* /.npmignore : NPM ignore list.\n* /package.json : NPM package configuration.\n* /tsconfig.json : [TypeScript compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for Node module output. it also uses for IDEs' error checking and coding assistance.\n* /tsconfig-webpack-node.json : [TypeScript compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for Node module single file output.\n* /tsconfig-webpack-dist.json : [TypeScript compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for distribution single file output.\n* /webpack.config.js : [Webpack2 build configuration](https://webpack.js.org/configuration/).\n* /.travis.yml : [Travis CI](https://travis-ci.org/) test and deploying pipeline configuration.\n* /bitbucket-pipelines.yml : [bitbucket pipelines](https://www.atlassian.com/software/bitbucket/features/pipelines) test and deploying pipeline configuration.\n* /bitbucket-heroku-deploy.sh : bitbucket test and deploying pipeline helper shell script.\n* /wercker.yml : [Wercker](http://www.wercker.com/) test and deploying pipeline configuration.\n* /buildspec.yml : AWS CodeBuild test and deploying pipeline configuration.\n* /buildspec-heroku-pre-deploy.sh : AWS CodeBuild test and deploying pipeline helper shell script.\n* /buildspec-heroku-deploy.sh : AWS CodeBuild test and deploying pipeline helper shell script.\n\n\n\n\n# NPM scripts\n* build : Build for production.\n* rebuild : Clean all output and build for production.\n* build:node:dev : Build Node module output (CommonJS) for develop.\n* build:node:prod : Build Node module output (CommonJS) for production.\n* build:dist:dev : Build distribution output (AMD) for develop.\n* build:dist:prod : Build distribution output (AMD) for production.\n* clean : Clean all output.\n* test : Run unit tests.\n* start : Run codes for debugging (bin/app.js).\n* watch : Build distribution output and watch continuously.\n\n\n\n\n# License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellyln%2Fwebpack-typescript-lib-quickstart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshellyln%2Fwebpack-typescript-lib-quickstart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellyln%2Fwebpack-typescript-lib-quickstart/lists"}