从零一步一步搭建TypeScript+webpack4开发环境
前言
相信大家都知道TypeScript的好处，TypeScript编译工具可以运行在任何服务器和任何系统上，TypeScript增加了代码的可读性和可维护性，很值得我们学习！
下边我将带大家一步步实现TypeScript开发环境搭建~
安装Node.js
相信大家电脑一般都安装了node.js
如果不确定是否安装了的话，可以在cmd里面输入以下命令：
node -v
如果看到了版本号，则说明已经安装好了~
创建一个文件夹
文件夹名字：xiaoming
mkdir xiaoming
切换到新建文件夹目录
cd xiaoming
初始化项目
npm init
回答问题
接着出来了这么一系列的问题，大家可以直接回车，使用默认值
package name: (xiaoming)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\明\Desktop\xiaoming\package.json:
{
"name": "xiaoming",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
接着项目就会出现一个package.json的配置文件
出现的package.json配置文件内容
内容如下：
{
"name": "xiaoming",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
全局安装typescript
mac电脑需要在npm 前面加sudo,代表以管理员身份运行
npm install webpack webpack-cli typescript ts-loader --save-dev
安装成功后进入项目根目录
用tsc命令进行初始化
tsc --init
此时项目根目录多了一个tsconfig.json文件
此时tsconfig.json代码如下：
添加webpack
再添加webpack，这里我们使用webpack4
npm install webpack-cli webpack dev-server -D
在这里我提一下webpack4的亮点：
webpack4最大的亮点就是尽可能少的需要我们去配置
我们知道原来在使用webpack2、3的时候，我们需要写大量的wepack配置，很多资源都要添加node,webpack4很多东西是零配置的
这里安装完了我们需要写一个webpack的配置文件~
写webpck的配置文件
创建一个build文件夹，里面创建webpack.config.js文件, 代码如下：
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//使用node的模块
module.exports = {
//这就是我们项目编译的入口文件
entry: "./src/index.ts",
output: {
filename: "main.js"
},
resolve: {
extensions: ['.ts','tsx','.js']
},
//这里可以配置一些对指定文件的处理
//这里匹配后缀为ts或者tsx的文件
//使用exclude来排除一些文件
module:{
rules:[
{
test:/\.tsx?$/,
use:'ts-loader',
exclude: /node_modules/
}
]
},
//这个参数就可以在webpack中获取到了
devtool: process.env.NODE_ENV === 'production'? false : 'inline-source-map',
devServer:{
//这个本地开发环境运行时是基于哪个文件夹作为根目录
contentBase:'./dist',
//当你有错误的时候在控制台打出
stats: 'errors-only',
//不启动压缩
compress: false,
host: 'localhost',
port: 8081
},
//这里就是一些插件
plugins:[
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./dist']
}),
new HtmlWebpackPlugin({
template: './src/template/index.html'
})
]
}
继续创建文件
- 在src的目录下，创建./src/index.ts
- 在src的目录下，创建template文件夹
- 在template文件夹下边创建index.html
目录结构如下：
安装ts-loader
解析ts文件转换成浏览器可以识别的文件
npm install ts-loader -D
安装cross-env
用于设置环境变量的,方便设置开发环境和生产环境
npm install cross-env -D
安装一些插件
clean-webpack-plugin 能清理一些指定的文件夹
html-webpack-plugin 指定一个编译的模型
npm install clean-webpack-plugin html-webpack-plugin -D
项目中安装typescript依赖
之前是全局安装
npm install typescript
在package.json文件写指定命令
上边weapack的命令已经写好了，下边我们就在package.json文件中写指定的命令：
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
},
在index.ts写代码测试一下
let num: number = 888
document.title = 'ming'
启动本地服务器执行
安装完毕后
npm start
运行效果：
打包执行
npm run build
这里就多了个dist目录
最后
希望看到文章的同学都有收获！
文章要是有不对的地方还望指正！
最后祝大家都越来越优秀！
欢迎大家加入，一起学习前端，共同进步！