wp-quickstart-caller-example

Usage example of webpack-typescript-lib-quickstart.

---

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