模塊化相關(guān)規(guī)范

ES6模塊化規(guī)范

• 每一個(gè)js文件都是一個(gè)獨(dú)立的模塊
• 導(dǎo)入模塊成員使用import關(guān)鍵字
• 暴露模塊成員使用export關(guān)鍵字

babel

• 通過JS高版本的代碼兼容低版本的代碼

• npm install --save-dev @babel/core @babel/cli @babel/present-env @babel/node

• npm install --save @babel/polyfill

• 項(xiàng)目根目錄創(chuàng)建文件babel.config.js

• babel.config.js 文件

  const presets = { 
    ["@babel/env",{
        targets:{
            edge:'17',
            firefox:'60',
            chrome:'67',
            safari:'11.1'
        }
    }
    
    ]
  }
  module.exports = { presets}
  

• 通過npx babel-node index.js 執(zhí)行代碼

模塊化基本語法

默認(rèn)導(dǎo)出，默認(rèn)導(dǎo)入

• 默認(rèn)導(dǎo)出 export default 默認(rèn)導(dǎo)出成員
• 默認(rèn)導(dǎo)入 import 接收名稱 from '模塊標(biāo)識符'

export default 只允許使用一次在類中

按需導(dǎo)入，按需導(dǎo)出

• 按需導(dǎo)出語法 export let s = 10
• 按需導(dǎo)入 import { s } from '模塊標(biāo)識符'

直接執(zhí)行

• import './m.js' // 直接導(dǎo)入并執(zhí)行

webpack前端構(gòu)建工具（打包工具）

提供模塊支持，代碼混淆，js兼容問題，性能優(yōu)化

有時(shí)間再看吧