1. 模块化开发

1.1webpack配置

https://mp.weixin.qq.com/s/wnL1l-ERjTDykWM76l4Ajw
大概：
创建一个文件夹
然后npm init
然后就有了packge.json
然后npm i webpack wabpack-cli -D
在目录下建webpack.config.js
然后给package.json中的scripts增加
"build":"webpack"

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

打包的时候会读取配置文件，所有然后配置webpack.config.js
这个时候webpack是不会对ts做编译的，所以我们要安装ts-loader，
ts-loader利用typescript对ts文件做编译，所以我们也要下载typescript
npm install ts-loader typescript -D
但是还是会报错，因为我们需要tsconfig.json这个ts的配置文件
tsc --init
会自动帮我们生成一个tsonfig.json文件
npm run build
然后输出bundle.js 创建index.html中引入这个js文件就OK了。
优化，我们搭建一个本地服务
npm install webpack-dev-server -D
修改package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  },

然后再项目文件下增加index.html文件,!+enter就ok
安装
npm install html-webpack-plugin -D
接下来npm run serve跑起来就可以了

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: "development",
  entry: "./src/main.ts",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
  },
  resolve: {
    extensions: [".ts", ".js", ".cjs", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
}

1.2 创建文件夹

在文件夹下面创建src文件夹
在src下面创建utils文件夹
utils文件夹下面创建math.ts

export function add(num1: number, num2: number) {
  return num1 + num2
}

export function sub(num1: number, num2: number) {
  return num1 - num2
}

在src下面创建main.ts，

import { add, sub } from "./utils/math";

console.log(add(20, 30));
console.log(sub(20, 30));

npm run serve
结果就会打印出来。

2.命名空间namespace

image.png

命名空间其实就是把我们的一个模块儿再来划分对应的一些作用域，
比如utils里面有个format.ts文件
里面有两个format函数
一个是format时间，一个format数字

export function format(time: string) {
  return "2222-02-22"
}

export function format(price: number) {
  return "99.99"
}

会出现命名冲突的问题
解决方法1就是改名字，把两个format的名字都改了，这样就不会命名冲突。
第二个就是给这两个format他们命名空间。

namespace time {
  export function format(time: string) {
    return "2222-02-22";
  }
  export function foo() {}
  export let name: string = "abc";
}

namespace price {
  export function format(price: number) {
    return "99.99";
  }
}
//time.format()
//price.format()
time.name;
time.foo;
/* 
因为命名空间里面的东西默认它只属于它内部，如果你想在外面能拿到它的时候，是必须要把它export出去的,就是foo函数前面加export name前面加export
*/

如果现在外面的文件使用怎么办呢？
就需要导出命名空间，就是再命名空间前面加export

export namespace time {
  export function format(time: string) {
    return "2222-02-22";
  }
  export function foo() {}
  export let name: string = "abc";
}

export namespace price {
  export function format(price: number) {
    return "99.99";
  }
}

再main.ts中

import { add, sub } from "./utils/math";
import { time, price } from "./utils/format";

console.log(add(20, 30));
console.log(sub(20, 30));

console.log(time.format("111111"));
console.log(price.format(123));

npm run serve
就会打印出来结果
50
-10
2222-02-22
99.99