Getting Started with Typescript and Webpack Part 1
In this tutorial, I want to briefly describe Typescript and Webpack technologies and how to get started using both of them together. So let's get started!
Typescript is developed and maintained by Microsoft and it’s best described as JavaScript with an optional Type system. It’s a complete superset of JavaScript, which means that every bit of JavaScript code you’ve written is already valid Typescript code.
Webpack is a module bundler, and this simply means that it can take many different JavaScript files / modules and efficiently combine them together into one final JavaScript file.
For those of you who want to dive in and see the final version of the code, check it out here!
Typescript and Webpack
Let's go ahead and open a terminal window, create a new project directory, and cd into it.
Next, let's create the following directory structure inside of the project.
At the root of your project directory, run "npm init -y" which is a NPM command that creates a boilerplate package.json file for you.
Next, we'll install Typescript and Webpack. Notice that I installed Typescript and Webpack beta version with the " — save-dev" flag, which simply means that I want to save these packages as developer dependencies (i.e. these are packages that the actual web application doesn’t need but are used by developers to produce the final web application).
In next tutorial, We integrate ReactJS to the typescript and webpack. Click Integrating ReactJS, Typescript, and Webpack Part 2. to continue reading.
For those of you who want to dive in and see the final version of the code, check it out here!
Source: Getting Started with ReactJS, Typescript, and Webpack
Typescript is developed and maintained by Microsoft and it’s best described as JavaScript with an optional Type system. It’s a complete superset of JavaScript, which means that every bit of JavaScript code you’ve written is already valid Typescript code.
Webpack is a module bundler, and this simply means that it can take many different JavaScript files / modules and efficiently combine them together into one final JavaScript file.
For those of you who want to dive in and see the final version of the code, check it out here!
Typescript and Webpack
Let's go ahead and open a terminal window, create a new project directory, and cd into it.
npm install --save-dev typescript webpack@2.1.0-beta.22Here’s how my package.json file and root directory look right now.
{
"name": "typescript-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^2.3.2",
"webpack": "^2.1.0-beta.22"
}
}
In order to set up Webpack, I'll add a webpack.config.js file in the root directory and it’ll have the following content:
var path = require("path");
var config = {
/*
* app.ts represents the entry point to your web application. Webpack will
* recursively go through every "require" statement in app.ts and
* efficiently build out the application's dependency tree.
*/
entry: ["./src/app.ts"],
/*
* The combination of path and filename tells Webpack what name to give to
* the final bundled JavaScript file and where to store this file.
*/
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
/*
* resolve lets Webpack now in advance what file extensions you plan on
* "require"ing into the web application, and allows you to drop them
* in your code.
*/
resolve: {
extensions: ["", ".ts", ".tsx", ".js"]
},
module: {
/*
* Each loader needs an associated Regex test that goes through each
* of the files you've included (or in this case, all files but the
* ones in the excluded directories) and finds all files that pass
* the test. Then it will apply the loader to that file. I haven't
* installed ts-loader yet, but will do that shortly.
*/
loaders: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
}
};
module.exports = config;
Next, let's install ts-loader by executing npm install ts-loader (remember to save it as a developer dependency).
npm install ts-loader --save-devWe’re almost there — now we just need to create a couple of files: index.html, src/app.ts, and src/some_module.ts
<--index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting Started with Typescript, Webpack</title>
</head>
<body>
<script src="build/bundle.js"></script>
</body>
</html>
// app.ts import greeting from "./some_module"; console.log(greeting);
// some_module.ts const greeting: string = "Hello World!"; export default greeting;Now that we’re trying to use Typescript, we should create a Typescript configuration file in the root directory — be sure to name it tsconfig.json.
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"outDir": "./build/",
"preserveConstEnums": true,
"removeComments": true,
"target": "ES5"
},
"exclude": [
"node_modules"
]
}
We'll also want to modify our package.json to include a NPM script which runs Webpack for us. Added a "build" script to the package.json file. Here's how my package.json file and project directory look right now.
{
"name": "typescript-webpack",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"ts-loader": "^2.0.3",
"typescript": "^2.3.2",
"webpack": "^2.1.0-beta.22"
}
}
We're finally here — the moment of truth! If we run "npm run build" in our root directory, we should see Webpack do its magic and produce a bundle.js file in the build directory. If we open the index.html file and look at the console, we should see our greeting "Hello World!" as below.In next tutorial, We integrate ReactJS to the typescript and webpack. Click Integrating ReactJS, Typescript, and Webpack Part 2. to continue reading.
For those of you who want to dive in and see the final version of the code, check it out here!
Source: Getting Started with ReactJS, Typescript, and Webpack
Comments
Post a Comment