Initialize the project and install dependencies
Shinken ts_in_action文品夾
npm init -y
After installation typescript, you can execute the following command to view the help information
npm i typescript -g
tsc -h
Create a configuration file and execute the following command to generate a tsconfig.json file
tsc --init
Use tsc to compile a js file
Newsrc/index.ts
let kaimo:string = "hello typescript"
Execute the following command to compile the ts file
tsc ./src/index.ts
The compilation results are as follows:
var kaimo = "hello typescript";
You can also use https://www.typescriptlang.org/play to view
Configure the build tool webpack environment
Install dependencies
npm i [email protected] [email protected] [email protected] -D
npm i [email protected] [email protected] -D
npm i [email protected] [email protected] [email protected] -D
Configure the appropriate environment
Basic configuration:
// 公共环境配置
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: "./src/index.ts",
output: {
filename: "app.js"
},
resolve: {
extensions: [".js", ".ts", ".tsx"]
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [
{
loader: "ts-loader"
}
],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/tpl/index.html"
})
]
};
module.exports = config;
Development configuration:
// 开发环境配置
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const config = {
devtool: "cheap-module-eval-source-map"
};
module.exports = config;
Production configuration:
// 生产环境配置
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const CleanWebpackPlugin = require("clean-webpack-plugin");
const config = {
plugins: [new CleanWebpackPlugin()]
};
module.exports = config;
webpack file entry configuration:
// webpack 文件入口
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");
const config = merge(baseConfig, process.NODE_ENV === "development" ? devConfig : proConfig);
module.exports = config;
package.jsonScript placement
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js"
},
Start the service and package the test
Add template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TypeScript in Action</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
Add functionality
let kaimo:string = "hello typescript";
document.querySelectorAll(".app")[0].innerHTML = kaimo;
Start service npm run start, visit http://localhost:8080/
Packnpm run build
