从零一步一步搭建TypeScript+webpack4开发环境

╰+哭是因爲堅強的太久メ 2023-07-04 04:39 12阅读 0赞

## 前言 ##

相信大家都知道TypeScript的好处，TypeScript编译工具可以运行在任何服务器和任何系统上，TypeScript增加了代码的可读性和可维护性，很值得我们学习！

下边我将带大家一步步实现TypeScript开发环境搭建~  
![cmd-markdown-logo][]

### 安装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代码如下： ##

![cmd-markdown-logo][cmd-markdown-logo 1]

## 添加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

> 目录结构如下：

![cmd-markdown-logo][cmd-markdown-logo 2]

## 安装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

运行效果：  
![cmd-markdown-logo][cmd-markdown-logo 3]

## 打包执行 ##

npm run build

这里就多了个dist目录  
![cmd-markdown-logo][cmd-markdown-logo 4]

## 最后 ##

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！  
![cmd-markdown-logo][cmd-markdown-logo 5]  
![cmd-markdown-logo][cmd-markdown-logo 6]

[cmd-markdown-logo]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzcvMTcwMWZkOGNiZDY0ZDE2MQ?x-oss-process=image/format,png
[cmd-markdown-logo 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzcvMTcwMWY2Yzk5Y2M1YWRlMw?x-oss-process=image/format,png
[cmd-markdown-logo 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzcvMTcwMWY4NTM1MDFjNDlkNQ?x-oss-process=image/format,png
[cmd-markdown-logo 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzcvMTcwMWZkMzJmMDllNmY2Mw?x-oss-process=image/format,png
[cmd-markdown-logo 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzcvMTcwMWZkMjVkNzkxYzkxNg?x-oss-process=image/format,png
[cmd-markdown-logo 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGUzNmNhZjkzZmI?x-oss-process=image/format,png
[cmd-markdown-logo 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGU4YjExZDBjZTY?x-oss-process=image/format,png