ts一般结合打包工具进行运用

webpack的基本配置

  1. 初始化项目：npm init -y，生成packjson.json，来管理项目
  2. 安装使用webpack的依赖：npm i -D webpack webpack-cli typescript ts-loader
  3. 新建webpack.config.js对webpack进行规范

webpack配置文件内容（webpack.config.json）：

// 引入一个包 const path = require(‘path’) // webpack中的所有配置信息都应该写在里面 module.exports = { // 指定入口文件 entry: “./src/index.js”, // 指定打包文件所在目录 output: { // 指定打包文件的目录 path:path.resolve(__dirname, ‘dist’), // 打包后文件的目录 filename:“bundle.js”, environment:{ // 告诉webpack不要使用箭头函数 arrowFunction:false } }, // 指定Webpack打包时要使用模块 module: { // 指定要加载的规则 rules: [ { // test指定的是规则生效的文件 test: /.ts$/, // 要使用的loader use:‘ts-loader’, // 排除的文件夹 exclude: /node-modules/ } ] } }
  1. 在pack.json的配置文件中的”scripts”里添加： “build”: “webpack”，
  2. 配置ts对应的配置文件：tsconfig.json（正常配置即可）

解决mode丢失问题：https://blog.csdn.net/alzzw/article/details/119867787

自动生成html文件并引入编译生成的js文件

生成html文件

npm i -D html-webpack-plugin；帮助我们生成html文件并引入加载的js文件

对html文件进行限制

在webpack.config.js里面配置：

  1. 1. <font style="color:#0000ff;background-color:#ffffff;">const    </font><font style="color:#267f99;background-color:#ffffff;">Html</font><font style="color:#000000;background-color:#ffffff;"> = </font><font style="color:#795e26;background-color:#ffffff;">require</font><font style="color:#000000;background-color:#ffffff;">(</font><font style="color:#a31515;background-color:#ffffff;">'html-webpack-plugin'</font><font style="color:#000000;background-color:#ffffff;">) //引入包</font>
  2. 2. <font style="color:#008000;background-color:#ffffff;"> // 配置webpack插件</font>
plugins:[ new Html(), ] 再次进行编译，不仅会生成js文件，还会生成html文件，并引入js文件 对生成的html进行限制甚至利用模板生成 plugins: [ new Html( { // 自定义html网页的头部 title:“这是一个自定义的title”, // 根据模板生成html文件 template:“./01.html” }), ]

生成服务器

直接在浏览器上呈现：npm i -D webpack-dev-server // 安装内置服务器，可以让项目在该服务器上自动进行刷新页面，同时在pack.json的配置文件中的”scripts”里添加： “start”: “webpack serve —open”，使用npm start可以直接打开页面

更新时清空旧文件

npm i -D clean-webpack-plugin 安装该插件，可以清空文件夹里的文件然后放进去新文件，防止还有旧文件剩余(不安装的话是直接替换原来的文件) 
  1. 1. <font style="color:#0000ff;background-color:#ffffff;">const</font><font style="color:#000000;background-color:#ffffff;"> { </font><font style="color:#0070c1;background-color:#ffffff;">cleanWebpackPlugin</font><font style="color:#000000;background-color:#ffffff;"> } = </font><font style="color:#795e26;background-color:#ffffff;">require</font><font style="color:#000000;background-color:#ffffff;">(</font><font style="color:#a31515;background-color:#ffffff;">'clean-webpack-plugin'</font><font style="color:#000000;background-color:#ffffff;">) 引入</font>
  2. 2. <font style="color:#0000ff;background-color:#ffffff;">new </font><font style="color:#795e26;background-color:#ffffff;">cleanWebpackPlugin</font><font style="color:#000000;background-color:#ffffff;">() // 在上面的plugins中添加</font>

定义可以作为模块的文件

定义可以引入模块的文件：在ts中暴露并在另一个模块中引入：resolve:{

extensions:[‘.ts’,‘.js’] } // 告诉webpack哪些文件可以作为模块被引入，可以正常编译，在webpack.config.js里面配置 ### 解决e兼容性问题 可以在旧语法转换成新语法，或者转换成不同的浏览器 1. 安装包：npm i -D @babel/core @babel/preset-env babel-loader core-js 2. 修改webpack.config.js配置文件，修改后的： module: { rules: [ { test: /.ts$/, use: [ { loader:“babel-loader”, options:{ presets: [ [ “@babel/preset-env”, { “targets”:{ “chrome”:“58”, “ie”:“11” }, “corejs”:“3”, “useBuiltIns”:“usage” } ] ] } }, { loader:“ts-loader”, } ], exclude: /node_modules/ } ] }