模块化

最新推荐文章于 2023-06-12 11:03:06 发布

星星有所不知

最新推荐文章于 2023-06-12 11:03:06 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/xnn_1993/article/details/87909467

js 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了seajs和nodejs的模块化编程实践，包括模块定义、引用及nodejs发布包流程。同时，介绍了如何使用babel进行es6代码转换，确保代码兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

seajs模块化

seajs定义模块

//案例1 exports
define(function(require, exports, module) {
	exports.a = 12;
})

//案例2 module、 require
define(function(require, exports, module) {
	let moda = require('a.js')
	
	module.exports = {
		a: 12,
		b: 55,
		show: function() {
			alert('aaa')
		},
		//es6 json中函数的简写方式
		showb() {
			alert('bbb')
		},

		c: moda.c
	}
})

seajs引用模块

//可以直接引入单个模块，也可以以数组的形式引入多个模块
seajs.use('mod1', function(mod1) {
	alert(mod1.a);
});
seajs.use(['mod1'], function(mod1) {
		alert(mod1.a);
		alert(mod1.b);
		alert(mod1.c);

		mod1.show();
		mod1.showb();
});

nodejs模块化

不用define
也有require、exports、module
引用自定义模块的两种方式：
3.1 所引用模块用绝对路径或者相对路径
3.2 将所引用的模块放入node_modules中，直接引用文件名即可

nodejs创建发布包

创建一个包：

npm init

登录npm

npm login
（https://www.npmjs.com/  官网的账号密码）

发布包

npm publish

babel

安装babel-cli
```
 npm i -g babel-cli
```
npm init 生成package.json
package.json中增加script选项

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "babel src -d dist"
},

说明：

3.1. 控制台执行 npm run build实际上就是执行babel src -d dist
3.2  babel src -d dist意为：使用babel工具读取src目录下的文件，并将编译后的文件输出到dist目录下

创建一个.babelrc文件，并设置预设

{
 "presets": ["env"]
}

引入库babel-preset-env

npm i babel-preset-env --save-dev

引入库成功后，可以看到package.json中多了一项

"devDependencies": {
	"babel-preset-env": "^1.7.0"
}

至此，环境已经部署ok，执行npm run build即可将es6的代码编译转化
```
 npm run build
```