从0到1搭建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目录

源码

大家可以参考一下我的这个源码

https://github.com/shifengming/xiaoming1
复制代码

最后

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

欢迎大家加入，一起学习前端，共同进步！

作者：小梦哟
链接：https://juejin.im/post/5e3d65c0518825493c7b4880