typescript01——环境搭建

最新推荐文章于 2024-08-27 16:58:03 发布

JadeFlicker

最新推荐文章于 2024-08-27 16:58:03 发布

阅读量119

点赞数

分类专栏： Typescript 文章标签： typescript

本文链接：https://blog.csdn.net/qq_39623078/article/details/104956045

版权

Typescript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

搭建开发环境

使用npm初始化项目
全局安装部分依赖
使用tsc初始化项目
配置webpack
添加开发和打包命令

1：使用npm init 初始化项目

npm init -y //(默认) 也可以自己配置相关项

在这里插入图片描述我的项目文件夹结构

2：全局安装部分依赖

cnpm i typescript tslint -g

3：使用tsc初始化项目

tsc --init

会生成一个tsconfig.json的配置文件

4：配置webpack

安装本地依赖项

 npm install webpack webpack-cli webpack-dev-server -D

const HtmlWebpackPlugin=require('html-webpack-plugin')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
module.exports={
    entry:'./src/index',
    output:{
        filename:'main.js'
    },
    resolve:{
        extensions:['.js','.ts','.tsx']
    },
    module:{
        rules:[
            {
                test:/\.tsx?$/,
                loader: "ts-loader",
                exclude:/node_modules/
            },

        ]
    },
    devtool:process.env.NODE_ENV==='production'?false:'inline-source-map',
    devServer:{
        contentBase:'.dist',
        stats:'errors-only',
        compress:false,
        host:'localhost',
        port:8082,
        open:true
    },
    plugins:[
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns:['./dist']
        }),
        new HtmlWebpackPlugin({
            template:'./src/template/index.html'
        })
    ]
}

5：添加开发和打包命令

"scripts": {
    "start": "cross-env NODE_ENV==='development' webpack-dev-server --config ./webpack.config.js",
    "build": "cross-env NODE_ENV==='production' webpack --config ./webpack.config.js"
  },

下边是package.json的完整配置

{
  "name": "tslearn",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "cross-env NODE_ENV==='development' webpack-dev-server --config ./webpack.config.js",
    "build": "cross-env NODE_ENV==='production' webpack --config ./webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.2",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}