Skip to content
/ tscw Public

TypeScript Watch, Compile and Bundle Realtime on Save by Webpack4

License

Notifications You must be signed in to change notification settings

HMarzban/tscw

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TSCWatcher

Simple command line interface (CLI) to compile TypeScript/JS in your ES target then Bundle all your Module compiled files with WebPack then watches your changes in real-time.

This package is part of Ned Library Project.

install: npm i -g tscw-cli Production use: tscw serve -p Development use tscw serve -d

How to use tscw:

Install pakage: npm i webpack webpack-cli typscript After that create your tsconfig.json and webpack.config.jsfiles and config like below:

webpack.config.js

const  path = require('path');
const  environment_mode = process.env.WebPack_ENV;
module.exports = {
	mode:  environment_mode,
	entry:  "./dist/main.js",
	output: {
	path:  path.resolve(__dirname, './src'),
		filename:  'bundle.js',
	},
	resolve: {
		extensions: ['.ts', '.js']
	}
};

tsconfig.json

{
	"compilerOptions":{
	"target":"es5",
	"module":"es6",
	"allowJs": true,
	"sourceMap":true,
	"emitDecoratorMetadata":true,
	"experimentalDecorators":true,
	"removeComments":false,
	"noImplicitAny":true,
	"outDir":"./dist"
	},
	"include": [
	"./typescript/main.ts"
	]
}

After all tscw need basic config to watch and serve your file, fot this one add this property in your package.json file:

"tscWatcher": {
	"port":  600, //port you wana serve your server
	"watch_dir":  "./typescript", //watch files for reload compiler
	"publicPath":  "./src"  //public path to set in static express
}

All don. you can now bring out your command line and type tscw serve, that's it( by default WebPack mode is in development, you can change it into production mode by tscw serve -p ). if you would like you can config webpack for another plugin, module or resolver like for sass, html and so on, to compile and bundle beside your typescript files.

Develop and Contribute

  1. git clone repo
  2. npm i
  3. npm link

About

TypeScript Watch, Compile and Bundle Realtime on Save by Webpack4

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published