wp-quickstart-caller-example
Usage example of webpack-typescript-lib-quickstart.
Features
- Use and extend
webpack-typescript-lib-quickstart
library.
Seesrc/index.ts
andsrc/lib/MathTwo.ts
. - Extend
webpack-typescript-lib-quickstart
's stylesheet.
Seesrc/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)
- Fork and clone me.
- Edit package informations of
package.json
.
Don't remember to change repository url, author, homepage. - Write your code.
- and build it.
npm run buildnpm test
Usage (runs on browsers)
- Fork and clone me.
- Edit package informations of
package.json
.
Don't remember to change repository url, author, homepage. - 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>: pathoutput:// 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[\/\\].*$/test: /\.jsx?$/...// TODO: You should add/remove the referenced packages paths.// TODO: YOU SHOULD REPLACE THE PACKAGE NAME!exclude: /node_modules[\/\\].*$/...// [Browser-single-js-file]: Packing a library Javascript file.entry:// TODO: YOU SHOULD REPLACE THE LIBRARY OUTPUT NAME!<your-output-name>: pathoutput:// 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[\/\\].*$/test: /\.jsx?$/...// TODO: You should add/remove the referenced packages paths.// TODO: YOU SHOULD REPLACE THE PACKAGE NAME!exclude: /node_modules[\/\\].*$/...// 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... - Write your code.
- and build it.npm run buildnpm test
- Deploy
dist/<your-library-name>.min.js
.
Usage (Compile SCSS Stylesheets to single CSS file)
- Fork and clone me.
- Edit package informations of
package.json
.
Don't remember to change repository url, author, homepage. - Write your code.
- and build it.npm run build
- Deploy
dist/style.min.css
.
Debugging with Webpack
npm run watch
- Run debbuger.
- Fix anything and save it.
- 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