TypeScript（一）开发环境基础项目构建

最新推荐文章于 2024-07-23 20:39:30 发布

Posden

最新推荐文章于 2024-07-23 20:39:30 发布

阅读量504

点赞数

分类专栏： TypeScript 文章标签： typeScript ts typescript项目构建

本文链接：https://blog.csdn.net/weixin_44420276/article/details/100511859

版权

TypeScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

项目结构

在这里插入图片描述

常用指令（按步骤顺序）

一、新建文件夹

二、npm init (npm init -y)

三、npm install typescript tslint -g(ts、代码风格审查) npm install typescript

四、tsc --init (tsconfig.json)

五、npm install webpack webpack-cli webpack-dev-server -D (开发依赖)

六、npm install ts-loader -D

七、npm install cross-env -D (传递参数)

八、npm install clean-webpack-plugin html-webpack-plugin -D

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")  // 注意 { }

module.exports ={
    entry:"./src/index.ts",
    output: {
        filename: "main.js",
    },
    resolve:{
        extensions:[ ".ts", ".tsx",".js"]     //识别文件时，引入可以免去后缀
    },
    module: {
        rules:[{
            test:/\.tsx?$/,
            use:'ts-loader',
            exclude: /node_modules/  // 忽略项
        }] 
    },
    devtool:process.env.NODE_ENV === 'production'?false:'inline-source-map', //process.env.NODE_ENV值是在webpack 启动命令时创建
    devServer: {
        contentBase: "./dist",
        stats:"errors-only",
        compress:false,
        host:'localhost',
        port:1234
    },
    plugins:[
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns:['./dist'] //每次构建前清理插件
        }),
        new HtmlWebpackPlugin({
            template:'./src/template/index.html' //模板 编译文件 html和生成的main.js合二为一
        })
    ]
}

template/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Page Title</title>
</head>
<body>
    
</body>
</html>

index.ts

document.title = "ts---test"; //可以在此文件下写ts,做测试

package.json

{
  "name": "ts-test",
  "version": "1.0.0",
  "description": "ts test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "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"
  },
  "keywords": [
    "ts"
  ],
  "author": "yp",
  "license": "ISC",
  "dependencies": {
    "tslint": "^5.19.0",
    "typescript": "^3.6.2"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^5.2.1",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^6.0.4",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

npm start

在这里插入图片描述
npm run build

Posden

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
TypeScript（一）开发环境基础项目构建

npm初始化项目使用全局安装部分依赖使用tsc初始化配置配置webpack添加开发和打包命令项目结构常用指令（按步骤顺序）一、新建文件夹二、npm init (npm init -y)三、npm install typescript tslint -g(ts、代码风格审查) npm install typescript四、tsc --init (t...
复制链接

扫一扫