理解几个基本概念：
UMD
UMD (Universal Module Definition), 希望提供一个前后端跨平台的解决方案(支持AMD与CommonJS模块方式)。
实现原理
UMD的实现很简单：
先判断是否支持Node.js模块格式（exports是否存在），存在则使用Node.js模块格式。
再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。
前两个都不存在，则将模块公开到全局（window或global）。
例如：
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return {
};
}));
利用webpack打包之后可以配置这样的格式代码
可以看到他也是这么干的。
场景，假如你写了一个js文件。里面有很多的函数和方法，你想给前端使用，也想给nodejs后端使用，那么通过这个方式就可以。
- 配置安装配置webpack。
webpack.config.js基础配置可以是
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:"./src/index.js",
output:{
filename:'bundle.js',//打包好的js名称
path:path.resolve(__dirname,'./dist'),
library: 'TEST', // 为你的库指定一个全局变量名
libraryTarget: 'umd', // 将你的库以 UMD 格式导出
clean:true
},
mode:'production',
plugins:[
new HtmlWebpackPlugin({
template:"./index.html",
filename:'app.html',
inject:'body'
})
],
devtool:"inline-source-map",
devServer:{
static:'./dist'
}
}
而你的index.js文件可以是
export function greet(name) {
return `Hello, ${
name}!`;
}
export function add(a, b) {
return a + b;
}
export const pi = 3.14;
执行打包代码
npx webpack
之后你的dist文件夹就会有一个bundle.js的代码，这样你可以就是使用这个库里面的方法了。这里经这个。测试反正我现在只有前端浏览器环境引入时，通过在 HTML 文件中通过 <script> 标签引入打包后的 UMD 格式的模块：
<script src="./bundle.js" type="module"></script>
<script type="module">
console.log(TEST);
</script>
直接在 <script> 导入这个打包后的.js文件。存在一个全局的库的名字，通过webpack的配置名字，他将所有的导出的函数绑定在个和库对象上。
也可以直接通过import导入这个js。
<script type="module">
import './bundle.js';
console.log(TEST);
</script>
没有探索出一套代码，运行在nodejs和es6模块下。太菜了主要是！！！！
那如何在nodejs中使用呢？
这里webpack说libraryTarget: 'umd', // 将你的库以 UMD 格式导出，而这是前后端跨平台的解决方案
但是当我运行在nodejs中的时候报错：self is not defined。出现 “self is not defined” 错误通常是因为在使用 UMD 格式的模块时，代码中出现了类似 self 或 window 的全局对象的引用，但是在某些环境中（如 Node.js 等）并没有定义这些全局对象。
这个错误一般出现在使用了类似 this、self 或 window 的全局对象引用，并且这些对象在当前的上下文中未定义。UMD 模块在不同的环境中可能有不同的全局对象，因此直接使用这些全局对象可能导致在某些环境中出现 “self is not defined” 错误。
因为是通过webpack打包的，那就设置这个globalObject: 'this'
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'./dist'),
library: 'TEST', // 为你的库指定一个全局变量名
libraryTarget: 'umd', // 将你的库以 UMD 格式导出
globalObject: 'this',//指定 UMD 格式中的全局对象，以便在不同环境下正确解析全局对象的引用。
clean:true
},
这里就可以使用ondejs中使用
const cc = require("./bundle.js");//把全局的TEXT名称赋值转为cc
console.log(cc.add(1,4));
基础的打包使用就可以了，但是打开这个之后，就不能在指定这个