{%hackmd BJrTq20hE %}
###### tags: `TypeScript` `JavaScript`
# 兩種主流的模組化，ES Modules與CommonJS
現在主要建議使用ES6modules，commonJS目前就是了解就可以
## commonJS
一個module只能export一個東西
是動態的，有需要的時候再引入。
### 單筆資料的模組化
模組

const myName = 'Jack'
module.exports = myName 

使用模組

const data = require('./commonJS')
console.log(data) // 'Jack'

### 多筆資料的模組化
模組

const myName = 'Jack'
const age = 52
const liveLocation = 'Taipei'
const job = 'Manger'

module.exports = {
    myName,
    age,
    liveLocation,
    job
}

使用模組

const data = require('./commonJs')
console.log(data)
// {myName: 'Jack', age: 52, liveLocation: 'Taipei', job: 'Manger'}

## ES6modules
一個module可以export多個
是靜態的，使用前須要先引入。
### 單筆資料的模組化
模組

export const myName = 'Jack'

使用模組

import {myName} from './es6modules'
console.log(myName) // Jack

### 如果很多變數要import怎麼辦?
模組

export const myName = 'Jack'
export const myAge = 56
export const myJob = 'Manger'
export const myLocation = 'Taipei'

使用模組

import {myName,myAge,myJob,myLocation} from './es6modules'
// 如果不想一個一寫寫出來的話
import * as all from './es6modules'
// 如何使用
console.log(all.myName)// Jack

### export default
export default功能在於預設該模組匯出的資料或是方法，避免出錯。
模組

export const myName = 'Jack'
export const myAge = 56
export const myJob = 'Manger'
export const myLocation = 'Taipei'
// 預設myName為這個模組所匯出的資料
export default myName

使用模組

import data from './es6modules'
console.log(data)// Jack

### 多筆的export
模組

export const myName = 'Jack'
export const age = 52
export const liveLocation = 'Taipei'
export const job = 'Manger'

export default {
    myName,
    age,
    liveLocation,
    job
}

使用模組

import data,{myName, age, liveLocation, job} from './es6modules'
console.log(data) // {myName: 'Jack', age: 52, liveLocation: 'Taipei', job: 'Manger'}
console.log(myName) // Jack

### 如果解構module的變數與使用module內的JS中的變數有同名的情況怎麼辦呢?
可以使用 as 把名子給改了，在下方的範例中myName在模組與使用模組的JS都有相同名子的變數，這個時候就可以把import的myName用as更名。

模組

export const myName = 'Jack'
export const age = 52
export const liveLocation = 'Taipei'
export const job = 'Manger'

export default {
    myName,
    age,
    liveLocation,
    job
}

使用模組

import data,{myName as moduleName, age, liveLocation, job} from './es6modules'
const myName = 'May'
console.log(moduleName) // Jack
console.log(myName) // May

## TS對於模組
在.ts當中只要檔案內部沒有export就會通通視為同一個環境，如果要把不同的.ts檔視為不同的檔案，就加上export，讓ts把該檔作為一個模組。

## 解析多種Module相關的config設定

## 設定根目錄，遠離冗長的路徑語法！

ts.config的設定

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    // 8-3 ----- start ----- 
    "module": "es6",
    "target": "es6",    
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 8-3 ----- end ----- 
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "strictNullChecks": true,
    // 把import的路徑改為絕對路徑 @等於./src
    "baseUrl": "./src",
    // *代表要解析@/後的所有路徑
    "paths": {
      "@/*": ["*"]
    }
  }
}

## webpack的設定

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const path = require('path');

module.exports = {
  target: 'web',
  // 入口
  entry: './src/index.ts',
  // 模式 development
  mode: 'development',
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.[hash].js',
  },
  // loader
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ],
      },
      {
        test: /\.gif/,
        type: 'asset/resource'
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'index.[hash].css'
    }),
    new CompressionPlugin()
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    // alias就是跟webpack說打包的時候@路徑就是src
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  },
  devtool: 'inline-source-map',
}