前端打包结构_webpack_vite_4_在node中使用esm语法

一、不创建node项目怎么用node运行esm语法的js

还是正常的写两个js，这两个js之间使用
export const xx = xx
import {...} from "./..."
来导入导出
只是需要：
1.把文件后缀从js改成mjs
2.使用node ./index.mjs来运行主文件，类似于python编译运行代码

二、esm 和 mjs之间的区别

1.esm

esm采用
export const xx = xx
import {...} from "./..."
来导入导出，前者可以有多个，对应下面的中括号也会有多个
一般来说下面的{}不属于解耦语法，假如
export const ex = {demo1,demo2,demo3}
在导入中：
import {ex} from "./index.mjs" 不会报错
import {demo1,demo2,demo3} from "./index.mjs"则会报错
但是对于一些foo的本地库来说则是这这两种办法都可以实现，这是因为他们一般:1.把其中需要导出的变量都导出。2.把这些变量都合并为一个变量再做导出。这就是兼容处理，如：
export const demo1 = ...
export const demo2 = ...
export const demo3 = ...
...
export const ex = {demo1,demo2,demo3}
这样的话在import的时候导出ex和demo都可以了

export 和export default的区别
export 是正常导出变量，但是export default本质上导出一个大变量(无需自己在创建变量名称)，这个大变量可以包含这个文件里面的小变量
var name = "Tome"
var age = 11
export default {
name:name,
age:age
}
import module_js from "./xxx.js" # 这个时候就不需要加括号了，这样比较简单
这个default的目的是为了可以像cjs一样直接导出一个总体变量。

2.cjs

cjs采用
module.exports = {
name:123
}
const module = require("./...js")
注意导出的时候必定是导出整个模块变量，然后所有需要导出的变量全都放在这个模块变量里面。
导出可以变成：
exports.name = name
exports.age = age
本质上来说相当于在前面加了
var module = {
exports :{}
}
var exports = module.exports
那为啥不能直接exports = {
name :name
age:age
}
而非要module.exports = {
name:name,
age:age
}
因为括号代表这是一个对象，如果使用引用去指向对象，那么这个引用会指向这个新的对象，而不是把创建的对象赋值到原来的位置上，所以不能直接使用对象进行赋值操作。

林外如果要用{}，这里和esm的标准不一样，所以{}是一个解构符号
const {name, age} = require("./xx")

而且，require导入文件不需要后缀名，但是from需要