必读MDN：JS模块化

参考

模块化

1. 背景：代码太长，把相关的一堆代码放到新建的文件，然后在要引用的js文件导入引用
2. 导出

• 整个文件都导出，就不用写啥；
• 如果就想导出文件css.js里的变量string，就要export default string

3. 引用导入

• import 文件路径
• 引入jquery时不用写具体路径，直接import jquery
• 还可以引入时改名：import $ from 'jquery'和 import 新变量名 from 'css.js'
• js先导出export {model}然后当ts引用js时用const model=require('文件路径').model
• js先导出export default model然后当ts引用js时用const model=require('文件路径').default

4. 注意，引入jquery时，需要先安装；

• 方法一：用yarn。先初始化yarn init -y，然后安装yarn add jquery。

这时会创建三个文件（夹）：node_modules、package.json、yarn.lock（写明jquery从哪里（tb）下载的，以后需要就可以去下载同一版）

• 方法二：用npm。npm install jquery（可把install，简写成i）

5. 示例

//示例1
//在main.js中
import ./reset.css
import ./global.css
import ./app1.js
import ./app2.js

//在app1.js中
import $ from 'jquery'
import ./app1.css

//在app2.js中
import $ from 'jquery'
import ./app2.css


//示例2
//在css.js里
const string = '许多css代码'
export default string  //要导出的是string
//在main.js里
import x from './css.js'  //引入css.js里的要导出的东西，在重新命名为x

语法

导出export

使用 export 关键字来导出一个变量(常量)

export const someValue = 1234
export const someValue0 = '1234'
export const someValue1 = {}
export let someValue2 = 1234
export let someValue3 = '1234'
export function someFunc = a => a+1

export写法还可以这么写

const someValue = 1234
function someFunc = a => a+1
let someObj = {}

export { someValue, someFunc, someObj}

还可以重命名变量导出

const someValue = 1234
function someFunc = a => a+1
let someObj = {}

export {
	someValue as exportNum,
    someFunc as exportFunc,
    someObj as exportObj
}

当然还可以使用 default来导出默认值，default在一个文件中，最多使用一次

export defalut someValue = 1234

导入import

导入指定变量

import { someValue } from './exportFile'  // 导入一个

import { someFunc, someObj } from './exportFile'   // 导入多个

重命名导入指定变量

import { someValue as importValue } from './exportFile'  // 重命名一个

import { someFunc as importFunc , someObj as importObj } from './exportFile' // 重命名多个

import {
    someValue,
    someFunc as importFunc 
}  // 导入多个，且部分重命名

整体加载

import * as importModule from './exportFile'  // 导入全部且挂载在 importModule 对象上

console.log(importModule.someValue)  // 1234

仅导入模块

import 'animate.css'

导入默认值

// 就是使用 default 导出的变量，导入的时候我们要为它命名
import value from './exportFile'

以下代码可以将一个目录里的某种后缀的文件全部导入

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}

模块知识

1. 模块规范: 模块规范就是声明和使用一个模块的规则
2. Commonjs(cjs)是Node.js支持的模块规范
3. umd是统一模块定义，兼容各种模块规范(含浏览器)。理论上优先使用umd,同时支持Node.js和浏览器
4. 最新的模块规范是使用import和export关键字