以下内容纯属个人扯淡，仅供参考

目录

一、概述

二、基本语法

---

 

一、概述

1、传统开发模式的问题

命名冲突：多个js文件之间，不能存在同名的变量 文件依赖：js文件之间无法实现相互引用

2、模块化

1。概述

将单独的一个功能封装到一个模块文件中，模块之间相互隔离，但可通过特定的接口公开内部 成员，也可以依赖别的模块 好处：方便代码重用，方便维护，提升效率

2。相关规范

1）浏览器端

AMD：Require.js CMD：Sea,js 已落伍

2）服务器端

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

3）ES6

浏览器端与服务器端通用的模块化规范 每个js文件都是一个独立的模块 导入模块成员：import 暴露模块成员：export

Node中默认支持CommonJS模块化，对于ES6模块化规范，还要搭配babel插件（babel是一个语法转换工具，可以将高级的js代码转换为低级的没有兼容性问题的js代码）来支持高级ES6

二、基本语法

概览

Demo 默认导入导出 按需导入导出 直接导入模块并执行

1、Demo

（1）安装Node、WebStorm（Hbuilder也行）

配置好npm镜像、WS绑定node、node本地仓库路径（不建议）、node环境变量等。参考：

Nodejs安装及环境配置

Webstorm下配置node环境

idea或webstorm配置npm问题

'cnpm' 不是内部或外部命令,真正有效解决方法

（2）安装babel

在项目文件夹（空）下运行，它将在该空文件夹下生成package-lock.json文件、node_modules文件夹

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

（3）安装polyfill

项目根路径下执行：

npm install --save @babel/polyfill

扩展知识：执行完上述两步后，该项目所需要的依赖就已完成，如果需要克隆一个出来，则只需要拷贝package-lock.json文件到空文件夹下执行：npm install就能下载到所有依赖

（4）babel配置文件

项目根路径下创建babel.config.js，内容如下

//语法转换插件数组，用到了env插件 const presets = [ ["@babel/env",{ //转换完毕的代码起码要支持 targets: { edge: "17", firefox: "60", chrome: "67", safari: "11.1" } }] ]; //向外暴露以供babel使用 module.exports = { presets };

（5）index.js

项目根路径下创建index.js，如下：

console.log('OK');

（6）运行

npx babel-node index.js

结果：控制台将打印OK

2、默认导入导出

（1）创建m1.js，如下：

let a = 10 let c = 20 let d = 30 function show() { console.log('1111111111111') } //默认导出：a、c属性，show方法 export default { a, c, show }

（2）index.js默认导入

//默认导出的这个m1名可以随便写，但最好取名要有意义 //from接的是js文件相对路径 import m1 from './m1.js' console.log(m1); //打印m1

注意：每个js模块中，可以有但只有一个export default，否则将运行报错

3、按需导入导出

（1）创建m2.js，如下：

export let s1 = 'aaa' export let s2 = 'ccc' export function say() { console.log('ooooooooo') }

（2）index.js按需导入

//m1是默认导入成员，它里面包含了a、c、show //后面是按需导入的 import m1, { s1, s2 as ss2, say } from './m1.js' console.log(m1); console.log(s1); console.log(ss2); console.log(say);

4、直接导入模块并执行

（1）创建m3.js

for (let i = 0; i < 3; i++) { console.log(i) } //该模块并未向外暴露任何成员

（2）index.js导入并执行

import './m2.js' //只执行m2中的js代码，但不接受它的成员