knockout-webpack-ts-quickstart

v0.1.0

Published

3 years ago

Quickstart project for knockout.js + TypeScript + decorators with Webpack2.

Downloads

0High
0Medium
0Low

Quickstart Webpack Webpack2 knockout.js decorator TypeScript SCSS PostCSS CI scaffolding Getting started Starter IE IE7 IE8

knockout-webpack-ts-quickstart

Quickstart project for knockout.js + TypeScript + decorators with Webpack2.

Features

Use decorators similar syntax to Angular.
See src/app/AppModule.ts and src/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>: 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 REPLACE THE PACKAGE NAME!
            // exclude 'node_module' directory except myself (refered from other packages)
            exclude: /node_modules[\/\\](?!knockout-webpack-ts-quickstart).*$/
        }, {
            test: /\.jsx?$/,
            ...

            // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!
            // exclude 'node_module' directory except myself (refered from other packages)
            exclude: /node_modules[\/\\](?!knockout-webpack-ts-quickstart).*$/
        }, {
        ...
},

// [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 REPLACE THE PACKAGE NAME!
            // exclude 'node_module' directory except myself (refered from other packages)
            exclude: /node_modules[\/\\](?!knockout-webpack-ts-quickstart).*$/
        }, {
            test: /\.jsx?$/,
            ...

            // TODO: YOU SHOULD REPLACE THE PACKAGE NAME!
            // exclude 'node_module' directory except myself (refered from other packages)
            exclude: /node_modules[\/\\](?!knockout-webpack-ts-quickstart).*$/
        }, {
        ...
},

Write your code.
and build it.
```
npm run build
npm test
```

Compile SCSS Stylesheets to single CSS file.

Clone me:

git clone shellyln/knockout-webpack-ts-quickstart.git

Build me:
```
npm run build
npm test
```
Copy dist/style.min.css and dist/style.min.css.map to your site.
and use:

app.html

<head>
    <link rel="stylesheet" type="text/css" href="path/to/style.min.css">
</head>

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

knockout-webpack-ts-quickstart

Features

Use with legacy IE (IE 7/8)

Usage (Starting your project)

Compile SCSS Stylesheets to single CSS file.

Debugging with Webpack

Directory structure

NPM scripts

License