typescript 输出混淆js typescript commonjs

文章目录

• 一、WebPack打包TS

• 1.1 html-webpack-plugin插件
• 1.2 webpack-dev-server
• 1.3 resolve

• 二、TypeScript的命名空间
• 三、TypeScript声明文件

---

一、WebPack打包TS

• npm init -y 创建package.json（使用npm安装包都要记录在这个文件中）
• 安装webpack

npm i webpack webpack-cli webpack-dev-server-D

• 安装tsc和ts-loader

npm i typescript ts-loader -D
tsc --init #创建tsconfig.json文件

vue脚手架也是基于webpack进行封装的。

建一个webpack.config.js文件
webpack是用node.js开发的，所以使用commandjs这种规范来写webpack.config.js
webpack.confog.js是webpack的配置文件。

npm install -g webpack-cli 需要全局安装webpack-cli

webpack.config.js

const path = require('path');

//webpack会加载这里导出的内容作为它的配置文件
module.exports = {
    // 入口
    entry:"./src/index.ts",
    // 输出
    output:{
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    
    module:{
        rules:[
            {test:/\.ts$/, use:'ts-loader', exclude:/node_modules/}
        ]
    },
    // 打包后的文件是什么模式
    mode:"development"

}

1.1 html-webpack-plugin插件

step1: 安装插件

npm i html-webpack-plugin -D ## 通过这个插件给我们打包html

step2:在webpack.config.js中配置插件

// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 配置html-webpack-plugin
plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
    ],

执行webpack之后就可以看到输出目录中多了一个html文件了，js文件会自动给我们引入。

1.2 webpack-dev-server

都在内存在处理打包文件，监听改变。
webpack serve //运行监听,动态改变

1.3 resolve

我们在src下面写一个global.ts文件

// 导出这个模块在其他模块中使用
export function sub(n1:number, n2:number):number{
    return n1 - n2;
}

我们想要在打包的时候打包这个global.ts，就需要在入口文件中引入
index.ts中的变化

import {sub} from './global' // 引入global.ts中的sub

function add(a1:number, a2:number):number{
    return a1 + a2;
}

console.log(add(1, 2));

// 可以使用了
console.log(sub(100, 50));

还需要在webpack.config.js中配置

resolve:{
        extensions: ['.ts', '.js']
    },

二、TypeScript的命名空间

• 命名空间一个最明确的目的就是解决重名
• namespace声明空间
  想要离开空间使用，须export
  import {} from ‘…ts or js文件’ {}中可以是空间名，函数名，常量名…

// 想要在其他文件中使用namespace1需要export
export namespace namespace1{
    // 想要在其他文件中使用sub需要export
    export function sub(n1:number, n2:number):number{
        return n1 - n2;
    }
}

import {namespace1} from './global' // 如果导出了空间，就只能引入空间，而不能直接引入空间内的函数

function add(a1:number, a2:number):number{
    return a1 + a2;
}

console.log(add(1, 2));

// 可以使用了
console.log(namespace1.sub(100, 50));

三、TypeScript声明文件

TypeScript作为JavaScript的超集，在开发过程中不可避免引用其他第三方的JavaScript库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留出类型声明，而产生了一个描述javascript库和模块信息的声明文件。

.d.ts 主要对javascript进行声明描述，才能在ts中引用这些已经写好的javascript函数，对象…

npm i axios -S

如果提供的包给我们提供了.d.ts那就能够在TypeScript中使用

如下图：

安装axios时需要按版本安装，如果不按版本有可能报错。所以一定要使用脚手架来做开发。

npm install axios@0.25.0 --save

import axios from 'axios'
// 在TS可以使用，因为axios已经为我们写好了.d.ts
axios.get('http://www.weather.com.cn/data/sk/101010100.html').then(res=>{
    console.log(res)
})
console.log("hehe");

用到其他第三方包没有提供.d.ts就需要我们自己去写一个了
如下，描述一个模块，并导出其中的join方法

declare module 'lodash'{
    export function join(arr:any[]):void;
}

图片我们也要当成模块去使用

// 定义图片模块
declare module "*.png";
declare module "*.jpg";

// 引用图
import aajpeg from '../src/images/aa.jpeg';