This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
generator-tslib-webpack with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
npm install -g yo
Install these NPM packages globally
npm install -g webpack karma-cli
npm install -g generator-tslib-webpack
Start the TypeScript Library Webpack Generator
You will be prompted for the following information
. |-- .editorconfig |-- .gitignore |-- karma.conf.js |-- node_modules |-- package.json |-- <source directory> |-- greeter.ts |-- greeter.spec.ts |-- index.ts |-- tsconfig.json |-- tslint.json |-- webpack.config.js
The configuration for text editors. The default indentation is 2 spaces. Edit this file if you want to use tabs or a different number of spaces.
The default list of project files that Git should not attempt to commit to the repository. Edit this if there are different files you add that you do not want to commit (build directories, temp files, etc).
The configuration file for the Karma test runned used to execute the unit tests. This file should be altered for changes to the overall testing process.
The folder contains all of the required dependencies for the project. You should not edit this file directly.
The NPM package file for the project containing the project's name, version, and dependencies. Update this file to add or change dependencies.
The directory that will contain all of the TypeScript source files for your library. Any new code meant to be distributed with the library should be placed in here.
An example TypeScript class that writes a simple message to the console. This file should be replaced with the actual functionality of your library.
An example set of test cases for the Greeter class. This should be replaced with test cases specific to your library.
The main TypeScript file pulling together all of the parts of the library. References to new TypeScript files should be placed in here.
The configuration for the TypeScript compiler. Any changes to how the TypeScript should be compiled should be made here.
The configuration for linting TypeScript code. Any changes to style rules or coding conventions should be made in this file.
The configuration for the webpack build. Any changes to the build process should be made in this file.
npm run clean
Removes the build artifacts and distributables.
npm run build
Builds both the uncompressed and minified versions of the library, as well as type defintiions and source maps.
npm run build:dev
npm run build:prod
npm run lint
Run the tslint utility on the TypeScript source and reports any errors or warnings.
Runs the unit tests and reports test status and code coverage. By default, this will automatically watch for changes and re-execute the tests when a change is detected.
npm run release:patch
Cleans, tests, and rebuilds the project, bumps the version by one patch version (0.0.1 -> 0.0.2) and tags it. Pushes the tag back to the Git repository.
npm run release:minor
Cleans, tests, and rebuilds the project, bumps the version by one minor version (0.0.1 -> 0.1.0) and tags it. Pushes the tag back to the Git repository.
npm run release:major
Cleans, tests, and rebuilds the project, bumps the version by one major version (0.0.1 -> 1.0.0) and tags it. Pushes the tag back to the Git repository.
Microsoft's Visual Studio Code editor provides great support out of the box for TypeScript projects. The library project that is generated will have a default .vscode folder with several settings pre-configured. The default project also includes several tasks so that the commands "Tasks: Run Test Task" and "Tasks: Run Build Task" will run the unit tests and build from within Visual Studio Code.
Github's Atom is another free text editor with good support for TypeScript via the Atom TypeScript plugin.
yo tslib-webpack" to generate the project.
I would recommend having a terminal open running "
npm test" or using the "Tasks: Run Test Task" in Visual Studio Code to output the linter warnings, test results, and code coverage.
You are now free to do whatever you want with the code base. Install some additional NPM libraries or types. Replace the greeter.ts file with something meaningful. Add additional Webpack plugins.
The generated project contains several NPM scripts for preparing a release. The "release:patch", "release:minor", and "release:major" scripts all clean and rebuild the project and run the unit tests prior to updating the version and tagging it.
After a version is tagged in your repository, you may use the "
npm publish" command to publicly expose
your library to NPM.