TS快速上手使用webpack配置TS项目
Posted YK菌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TS快速上手使用webpack配置TS项目相关的知识，希望对你有一定的参考价值。
嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信公众号：
ykyk2012]
文章目录
实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，今天我们以webpack为例介绍一下如何结合构建工具使用TS。
初始化项目
通过执行命令 npm init -y 初始化一个项目并创建package.json文件
使用tsc --init 创建ts的配置文件tsconfig.json
创建src/index.ts文件，用来编写ts代码
使用构建工具
安装依赖包
npm i -D webpack webpack-cli webpack-dev-server
-
webpack
- 构建工具webpack
-
webpack-cli
- webpack的命令行工具
-
webpack-dev-server
- webpack的开发服务器
npm i -D ts-loader typescript
-
typescript
- ts编译器
-
ts-loader
- ts加载器，用于在webpack中编译ts文件
npm i -D html-webpack-plugin clean-webpack-plugin
-
html-webpack-plugin
- webpack中html插件，用来自动创建html文件
-
clean-webpack-plugin
- webpack中的清除插件，每次构建都会先清除目录
配置webpack
在根目录下配置webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports =
// 指定入口文件
entry: "./src/index.ts",
// 开发模式使用，方便查错误
devtool: "inline-source-map",
// 配置服务器
devServer:
contentBase: "./dist",
,
// 指定打包文件所在目录
output:
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment:
arrowFunction: false, // 关闭webpack的箭头函数，可选
,
,
// 用来设置引用模块
resolve:
extensions: [".ts", ".js"],
,
// 配置webpack的loader
module:
rules: [
test: /.ts$/,
use:
loader: "ts-loader",
,
exclude: /node_modules/,
,
],
,
// 配置webpack的插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(
template: "./src/index.html",
),
],
;
以上是一些基本的配置，但是在实际开发中，webpack在配置开发环境与生产环境时，配置的有些东西不太相同，所以我们应该分开写我们生产环境和开发环境的webpack配置
所以我们就在根目录下创建build文件夹存放我们的webpack配置文件
npm i -D webpack-merge
基本配置webpack.base.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports =
entry: "./src/index.ts",
output:
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment:
arrowFunction: false, // 关闭webpack的箭头函数，可选
,
,
resolve:
extensions: [".js", ".ts"],
,
module:
rules: [
test: /.ts$/,
use: [
loader: "ts-loader",
,
],
exclude: /node_modules/,
,
],
,
plugins: [
new HtmlWebpackPlugin(
template: "./src/index.html",
),
],
;
开发环境配置webpack.dev.config.js
module.exports =
devtool: "inline-source-map",
;
生产环境配置webpack.pro.config.js
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports =
plugins: [new CleanWebpackPlugin()],
;
配置主文件webpack.config.js
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");
module.exports = (env, argv) =>
let config = argv.mode === "development" ? devConfig : proConfig;
return merge(baseConfig, config);
;
配置tsc
根目录下创建tsconfig.json，可以根据自己需要自行配置，详细可以参考【TS】快速上手（四）配置选项 - 编译选项compilerOptions - 掘金 (juejin.cn)
"compilerOptions":
"target": "ES2015",
"module": "ES2015",
"strict": true
编写代码
index.ts
const box = document.querySelector('#app')
const hello: string = 'Hello YK菌'
if (box !== null)
box.innerHTML = hello
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TS & webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
配置命令
修改package.json添加如下配置
......
"scripts":
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js"
,
......
在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器
npm run build
编译
npm start
启动开发服务器
浏览器显示内容
配置babel
除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，通过以下步骤可以将babel引入到项目中。
安装依赖包
npm i -D @babel/core @babel/preset-env babel-loader core-js
-
@babel/core
- babel 的核心工具
-
@babel/preset-env
- babel 的预定义环境
-
babel-loader
- babel 在webpack中的加载器
-
core-js
- core-js 用来使老版本的浏览器支持新版ES语法
修改配置文件
修改webpack.config.js配置文件
...
module:
rules: [
test: /.ts$/,
use: [
loader: "babel-loader",
// 设置babel
options:
// 设置预定义的环境
presets: [
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
// 要兼容的目标浏览器
targets:
chrome: "58",
ie: "11",
,
// 指定corejs的版本
corejs: "3",
// 使用corejs的方式 "usage" 表示按需加载
useBuiltIns: "usage",
,
],
],
,
,
loader: "ts-loader",
,
],
exclude: /node_modules/,
,
];
...
如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
最后，欢迎关注我的专栏，和YK菌做好朋友
以上是关于TS快速上手使用webpack配置TS项目的主要内容，如果未能解决你的问题，请参考以下文章
TS快速上手配置选项 - 编译选项compilerOptions
TS快速上手配置选项 - 编译选项compilerOptions