knockout-webpack-ts-quickstart
Quickstart project for knockout.js + TypeScript + decorators with Webpack2.
Features
- Use decorators similar syntax to Angular.
Seesrc/app/AppModule.ts
andsrc/app/components/*Component.ts
. - Compile TypeScript source and output as single file with source map.
- Compile SCSS, do 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.
Use with legacy IE (IE 7/8)
See legacy-ie-fix branch.
Usage (Starting your project)
- Fork and clone me.
- Edit package informations of
package.json
.
Don't remember to change repository url, author, homepage. - Edit library name and output file name of
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 REPLACE THE PACKAGE NAME!// exclude 'node_module' directory except myself (refered from other packages)exclude: /node_modules[\/\\].*$/test: /\.jsx?$/...// TODO: YOU SHOULD REPLACE THE PACKAGE NAME!// exclude 'node_module' directory except myself (refered from other packages)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 REPLACE THE PACKAGE NAME!// exclude 'node_module' directory except myself (refered from other packages)exclude: /node_modules[\/\\].*$/test: /\.jsx?$/...// TODO: YOU SHOULD REPLACE THE PACKAGE NAME!// exclude 'node_module' directory except myself (refered from other packages)exclude: /node_modules[\/\\].*$/... - Write your code.
- and build it.npm run buildnpm test
Compile SCSS Stylesheets to single CSS file.
- Clone me:git clone shellyln/knockout-webpack-ts-quickstart.git
- Build me:npm run buildnpm test
- Copy
dist/style.min.css
anddist/style.min.css.map
to your site. - and use:
app.html
Debugging with Webpack
npm start
- Run browser's devtools.
- 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.
- /dist/ : Output directory of distribution javascript single file (AMD ; for browsers) and stylesheet single 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 : Entry point file.
- /src/app/ : Application source files.
- /src/app/components : Components source files.
- /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 packed 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-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