• TS_开发一个项目

    目录

     一、编译一个TS文件

    1.安装TypeScript

    2.创建TS文件

    3.编译文件

    4.用Webpack打包TS

    ①下载依赖

    ②创建文件

    ③启动项目

    TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

    TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任大型项目的开发和维护。因此微软开发了TypeScript ，使得其能够胜任大型项目的开发。

    TS中文文档icon-default.png?t=N7T8https://ts.nodejs.cn/

     一、编译一个TS文件

    1.安装TypeScript

    npm install -g typescript

    2.创建TS文件

    在编辑器里新建一个文件，名为  file.ts  ,内容如下：

    1. function greeter(person) {
    2.     return "Hello, " + person;
    3. }
    4.  
    5. let user = "Jane User";
    6.  
    7. document.body.innerHTML = greeter(user);

    3.编译文件

    JS的运行环境(浏览器和nodeJS)不认识TS代码，所以TS想运行，必须先转化为JS代码，这个转化就叫做编译。

    TS官方提供了编译器，编译时会将类型声明和类型相关的代码全部删除，只留下能运行的JS代码，不会改变JS的运行结果。

    TS官方提供的编译器叫做tsc，它可以将ts代码编译成js代码。

    tsc file.ts

    此时可以看到，编译出了一个js文件，file.js。

    创建一个 file.html ,运行到浏览器:

    1. DOCTYPE html>
    2. <html>
    3.     <head><title>TypeScript Greetertitle>head>
    4.     <body>
    5.         <script src="file.js">script>
    6.     body>
    7. html>

    在file.html文件里上右键：

    浏览器运行结果如下：

    4.用Webpack打包TS

    完整代码在页面顶部，下载后解压，终端输入  npm i   ,然后  npm run start 即可启动项目。

    用webpack对ts文件进行打包，这样就不用每次更改ts文件，都重复 tsc file.ts ,这个操作了。一旦对ts文件进行更改，他会自动编译为js,并更新浏览器展示。

    如果你没接触过webpack,查看这个文章;

    webpack基础知识点icon-default.png?t=N7T8https://blog.csdn.net/zxy19931069161/article/details/139058499?spm=1001.2014.3001.5501

    ①下载依赖

    首先新创建一个文件夹名为   webpack-ts  使用编辑器打开这个文件夹。

    接下来在这个文件夹里打开终端：

    分别执行以下六个命令：

            1.下载ts

    npm i -g typescript

     然后执行

    tsc --init

    如果报错：

     那是因为npm i -g typescript ， 忘了加 -g 。重新下载即可。

            2.下载webpack以及命令行工具。webpack-cli 是一个命令行工具，用于通过命令行使用 webpack 进行构建和打包前端项目。它允许开发人员在终端或命令提示符中运行常用 webpack 命令，以更快捷、高效的方式使用 webpack。

    npm i webpack webpack-cli

            3.下载webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务，可以为静态文件提供服务，也可以动刷新和热替换。

    npm i webpack-dev-server

            4.html-webpack-plugin简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。clean-webpack-plugin是一个Webpack插件，用于在每次构建前清空输出目录。

    npm i html-webpack-plugin clean-webpack-plugin

            5.ts-loader是一个专门为 Webpack 设计的 TypeScript 加载器，它让 TypeScript 和现代前端构建流程无缝对接。

    npm i ts-loader

             6.cross-env 是一个运行跨平台设置和使用环境变量的脚本工具，它帮助开发人员在不同操作系统上设置和运行环境变量，确保代码的可移植性。

    npm i cross-env

     此时webpack-ts文件夹内已经生成了三个文件和node_modules文件夹。

    node_modules文件夹里面是存放的刚才下载的各种依赖包。

    package.json的作用是记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位），默认为大版本也可以npm i xxx@x.x.x锁定版本，还有npm run的脚本，项目的基本信息等

    package-lock.json文件会保存 node_modules 中所有包的信息（详细版本、下载地址、缓存地址）等，重新 npm install 的时候会通过记录的信息提示安装速度，如通过 integrity 查找本地缓存而不使用远程仓库。

    tsconfig.json是 TypeScript 编译器的配置文件，用于指定编译 TypeScript 代码时的编译选项和编译目标等信息。通过修改该文件，可以定制 TypeScript 编译器的行为，例如指定编译目标、启用或禁用特定的语言特性、设置代码检查规则等。

    ②创建文件

    webpack-ts下新建文件夹build,添加以下四个文件：

    webpack.config.js

    1. const { merge } = require("webpack-merge");
    2. const baseConfig = require("./webpack.base.config");
    3. const devConfig = require("./webpack.dev.config");
    4. const proConfig = require("./webpack.pro.config");
    5.  
    6. module.exports = (env, argv) => {
    7.   let config = argv.mode === "development" ? devConfig : proConfig;
    8.   return merge(baseConfig, config);
    9. };

    webpack.base.config.js

    1. const path = require("path");
    2. const HtmlWebpackPlugin = require("html-webpack-plugin");
    3.  
    4. module.exports = {
    5.   entry: "./src/index.ts",
    6.   output: {
    7.     path: path.resolve(__dirname, "dist"),
    8.     filename: "bundle.js",
    9.     environment: {
    10.       arrowFunction: false, // 关闭webpack的箭头函数，可选
    11.     },
    12.   },
    13.   resolve: {
    14.     extensions: [".js", ".ts"],
    15.   },
    16.   module: {
    17.     rules: [
    18.       {
    19.         test: /.ts$/,
    20.         use: [
    21.           {
    22.             loader: "ts-loader",
    23.           },
    24.         ],
    25.         exclude: /node_modules/,
    26.       },
    27.     ],
    28.   },
    29.   plugins: [
    30.     new HtmlWebpackPlugin({
    31.       template: "./src/index.html",
    32.     }),
    33.   ],
    34. };

    webpack.dev.config.js

    这是开发版的打包文件，会直接启动项目。

    1. module.exports = {
    2.     devtool: "inline-source-map",
    3.   };

    webpack.pro.config.js

    这是生产环境的打包文件，会在build文件夹下自动生成dist文件夹，dist文件夹里面的内容就是项目编译后的文件，放到生产环境即可。

    1. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    2.  
    3. module.exports = {
    4.   plugins: [new CleanWebpackPlugin()],
    5. };

    webpack-ts下新建文件夹src,并在src文件夹下创建两个文件，内容如下：

    index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>TS & webpacktitle>
    9. head>
    10.  
    11. <body>
    12.   <div id="app">div>
    13. body>
    14.  
    15. html>

    index.ts

    1. const box = document.querySelector('#app')
    2. const hello: string = 'Hello ts'
    3.  
    4. if (box !== null) {
    5.   box.innerHTML = hello
    6. }

    此时项目结构：

    ③启动项目

    终端执行命令，开发环境:

    npm run start

    此时可以看到浏览器页面：

    此时在项目 index.ts 文件内进行更改，可以看到浏览器自动同步更改为最新的。

    终端执行命令，生产环境：

    npm run build

    会在build文件夹下自动生成dist文件夹，dist文件夹里面的内容就是项目编译后的文件，放到生产环境即可。

  • 相关阅读:
    【微机接口】8086中断指令
    10. 获取操作系统版本和位数
    idea高级调试技巧
    Go语言中的零拷贝优化，值得大家收藏
    pytest之parametrize()实现数据驱动
    博睿数据一体化智能可观测平台入选中国信通院2022年“云原生产品名录”
    华为云ECS麒麟V10磁盘分区问题
    关于如何运行Power Automate Flow
    python：xml.etree.ElementTree 读 Freeplane.mm文件，生成测试案例.csv文件
    开源模型应用落地-LangChain高阶-知识图谱助力记忆增强
  • 原文地址：https://blog.csdn.net/zxy19931069161/article/details/140019613