赞
踩
当你能区分出.js, .ts, .mjs, .cjs, .mts,还有.mjsx, .cjsx, .mtsx, .ctsx的差异时,你就可以出师了。
模块定义,包管理,以及加载问题是所有编程语言不得不面临的问题,死生存亡之地,不可不察也。
在很多情况下,我们意识不到模块导入方式带来的问题,但是,当你用Nuxt3加载CJS模块时,各种问题就来了。
一个模块就是一个js/ts文件,可以定义函数、类、数据,并export出来让外部可见。
不同的规范,导出导入的写法不同。
自从诞生了ESM,前端模块化方案逐步从IIFE、UMD、AMD、CommonJS、ESM等诸多模块化方案,逐步收敛到了ESM和CJS之争。
RequireJS:是一个AMD框架,可以异步加载JS文件,按照模块加载方法,通过define()函数定义,第一个参数是一个数组,里面定义一些需要依赖的包,第二个参数是一个回调函数,通过变量来引用模块里面的方法,最后通过return来输出。
是一个依赖前置、异步定义的AMD框架(在参数里面引入js文件),在定义的同时如果需要用到别的模块,在最前面定义好即在参数数组里面进行引入,在回调里面加载。
通过define()定义,没有依赖前置,通过require加载jQuery插件,CMD是依赖就近,在什么地方使用到插件就在什么地方require该插件,即用即返,这是一个同步的概念
CJS模块只能运行在Nodejs后端,ES6模块可以运行在nodejs端,也可以运行在浏览器端,当然不是所有浏览器都支持。
我们可以在ES6 module里导入CJS模块,但是在CJS模块里不能用require()导入ES6模块,只能用import函数。
functions.mjs文件:
export default function(msg) {
return `Default: ${msg}`
}
export function myFunction(msg) {
return `Hello: ${msg}`
}
export const PI = 3.1415926
cjs_module.cjs文件:
module.exports = {
func1: function() {
return 'this is func1'
},
func2: function() {
return 'this is func2'
}
}
// or
// exports.test = 123
module_test.js文件:
import {myFunction} from './functions.mjs'
import sayHello from './functions.mjs'
import { func1 } from './cjs_module.cjs'
import { default as pkg } from './cjs_module.cjs'
console.log(myFunction('laohu'))
console.log(sayHello('laowang'))
console.log(func1())
console.log(pkg.func1())
注意:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。