Ts编译选项与打包

最新推荐文章于 2025-02-19 10:42:38 发布

「已注销」

最新推荐文章于 2025-02-19 10:42:38 发布

阅读量1.7k

点赞数

文章标签： typescript javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_44316317/article/details/122309138

版权

本文介绍了如何使用tsconfig.json文件配置TypeScript编译器，以自动化Ts文件的编译过程，避免手动执行tsc命令。同时，还讨论了通过Webpack打包Ts代码的方法，包括配置tsconfig和修改package.json的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ts编译选项与打包

写在前边：当Ts每次进行编译的时候都需要进行执行tsc XXXX.ts进行文件的重新编译，会变的很麻烦。

解决方法一.Ts编辑器的自动监视

tsc XXXX.ts -w //对文件进行监视，但是也不太适合平时的开发（知道有这种方式就好，简而言之没屁用）

tsc //直接执行tsc命令会把所有的文件进行执行

1.使用tsconfig.json文件进行Ts文件的编译配置（ts编译器的配置文件）

当执行tsc命令时候，所有目录下的Ts文件都会被编译

01.配置项

"include":{
    "./src/**/*"   //**表示任意目录*表示任意文件
}
//include表示需要编译执行的文件

02.配置项

"exclude":[]
//不被编译的内容，对比gitignore

03.配置项

"extends":"./config/**/*"   //继承其他的配置文件

04.配置项

"files":[
  "文件1"：'XXX'
   "文件1"：'XXX'
    "文件1"：'XXX'
     "文件1"：'XXX'
      "文件1"：'XXX'
]
//和includes很像在其中的文件都会被编译，有点麻烦

05.配置项

 "compilerOptions": {
    "module": "commonjs",   //js模块化解决方案
    "target": "es5",       //用来指定Ts编译的Es版本Es有什么版本就可以写什么版本
    "sourceMap": true,
    "lib":["dom"]  //库包括dom等,一般使用默认值即可
    "outDir":"./dist"  //编译后文件存放的目录
    "outFile":"./dist/app.js" //将编译后的文件合并到app.js文件中，模块化必须使用amd或者system模块化。
    "allowJs":false   //是否对js代码进行编译
    "checkJs": true   //是否对js代码进行检查
    "removecommmens": true,//是否移除注释
    "noEmit":true,//是否生成编译后的文件
    "noEmitError":true,//当有错误时候不会生成错误文件
    "alwaysStrict":true//是否对js文件使用严格模式
    "noimplictAny":    //不允许隐式的any类型
    "noimplictThis":    //不允许不明确类型的this
  },

使用webpack打包Ts代码

//在包中初始化出package.json文件
 npm init -y   //生成一个package.json文件
//安装各种包
 npm i -D webpack-cli   webpack  typescript  ts-loader

//编写webpack配置文件
//引入路径模块
const path = require('path');
//webpack的所有配置信息都应该写在module.export文件中
module.exports = {
 //指定入口文件
 entry:'./src/demo.ts',
 //指定打包完文件的输出目录
    output: {
     path:path.resolve(__dirname,'dist'),
     //打包过后的文件名称
     filename: "bundle.js"
    },
    //指定webpack打包时需要用的模块
    module: {
     //指定加载的规则
        rules: [
            {
                //test指定规则生效的文件
                test:/\.ts$/,
                use:'ts-loader',//使用ts-loader进行对ts进行打包处理
                //要排除的文件
                exclude: 'bundle.js',

            }
        ]
    }
}

编写tsconfig文件

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "sourceMap": true,
    "strict": true,
  },
  "exclude": [
    "node_modules"
  ],
  "include":[
    "./src/**/*"
  ],
}

修改package.json文件

{
  "name": "TypeScript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}
//增加一个build选项可以直接执行命令进行webpack的打包 npm run build