【ES6模块化】import - export - 按需引入 - 项目中使用babel - ES6模块化引入npm包

1. 什么是模块化

把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以以来别的模块

2. 模块化的好处

1. 防止命名冲突
2. 代码复用，提高效率
3. 高维护性

3. 模块化规范产品

3.1 浏览器端模块化规范

1. AMD
   Require.js
2. CMD
   Sea.js

3.2 服务器端模块化规范

3. CommonJS
   node.js/Browserify
   模块分为：单文件模块 与 包
   模块成员导出：module.exports 和 exports
   模块成员导入：require('模块标识符')

3.3 大一统的模块化规范——ES6模块化

4. es6
   之前那些社区提出的标准化，存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准
   在ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范

• 每个js文件都是一个独立的模块
• 导入模块成员 使用 import 关键字
• 暴露模块成员 使用 export 关键字

4. ES6模块化基本使用

4.1 export 模块暴露数据

4.1.1 分别暴露 (按需暴露)

m1.js

export let school = 'YKyk';
export function teach() {
    
    
	console.log('teach');
}

4.1.2 统一暴露

m2.js

let school = 'YKyk';
function find() {
    
    
	console.log('find');
}
export {
    
    school, teach}

4.1.3 默认暴露

m3.js

export default {
    
    
	school: 'YKyk',
	change: function(){
    
    
		console.log('change');
	}
}

4.2 import引入模块

4.2.1 通用的引入

import * as m1 from "./src/js/m1.js"
m1.teach();
import * as m3 from "./src/js/m3.js"
m3.default.change();

4.2.2 解构赋值形式（按需引入）

import {
    
     school, teach } from "./src/js/m1.js"
teach();
import {
    
     school as yk, find } from "./src/js/m2.js" // 起别名
console.log(yk);
import {
    
     default as m3 } from "./src/js/m3.js"
m3.change();

4.2.3 针对默认暴露的简便导入形式

import m3 from "./src/js/m3.js"
m3.change();

4.3 直接导入并执行模块代码

m4.js

for(let i = 0; i<3; i++) {
    
    
	console.log(i);
}

import './m4.js' // 直接导入并执行模块代码

4.4 浏览器使用

<script src=".src/js/app.js" type="module"></script>

5. 项目中使用babel

1. 安装工具 babel-cli babel-preset-env browserify(webpack)

npm i babel-cli babel-preset-env browserify -D

2. 运行

npx babel src/js -d dist/js --preset=babel-preset-env

3. 打包

npx browserify dist/js/app.js -o dist/bundle.js

6. ES6模块化引入npm包

1. 装包

npm i jquery

2. 入口文件引入

import $ from 'jquery' // const $ = require("jquery")

7. Node.js中通过babel体验ES6模块化

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

npm install --save @babel/polyfill

项目根目录中创建配置文件babel.config.js

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

执行js代码

npx babel-node index.js