New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

knockout-webpack-ts-quickstart

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

knockout-webpack-ts-quickstart

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

0.1.0
latest
Source
npm

Version published: 8 years ago

Maintainers: 1

Created: 8 years ago

Source

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

Keywords

FAQs

What is knockout-webpack-ts-quickstart?

Is knockout-webpack-ts-quickstart well maintained?

Package last updated on 15 Jun 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install