1.0.0-alpha.33 • Published 2 years ago
test-webpack-umd v1.0.0-alpha.33
webpack打包
测试有序列表
- 测试1
- 测试2
- 测试3
测试无序列表
- 测试4
- 测试5
webpack umd 格式打包, 支持前端和node,统一格式,兼容cjs和AMD
webpack.config.js
webpack 打包抽离css文件,与js文件分离
https://juejin.cn/post/6844903788659261453 webpack.config.js
js 动态加载
eval 或者 new Function 动态加载js, 支持前端和node, 通过执行js字符串
https://blog.csdn.net/lsd284504557/article/details/91347395
前端: ceshi.html node: ceshi2.js
需要同时支持前端和node, 所以js文件打包需要使用webpack的umd格式,来统一模块规范,兼容cjs和AMD。
import() 动态加载js, 支持前端和node, 需要文件必须在本地
https://2ality.com/2017/01/import-operator.html
ceshi4.js
通过动态创建 标签来加载js, 挂载到window对象上,只支持前端
https://www.cnblogs.com/telwanggs/p/11045773.html
两种: 一种是使用src = url, url为js文件的链接地址 一种是使用text = 'jscontent', jscontent为js文件的字符串内容。
const scriptEl = document.createElement('script');
scriptEl.type = 'text/javascript';
// scriptEl.src = src;
scriptEl.text = `const render = (containerId) => {
const div = document.createElement('div');
div.setAttribute('class', 'render-container');
div.innerText = "SDK version1";
document.getElementById(containerId)?.appendChild(div);
}
window['talos-byted-shell-instance'] = render;`;
document.body.appendChild(scriptEl);
css 动态加载
可以通过标签引入
const linkEl = document.createElement('link');
linkEl.rel = 'stylesheet';
linkEl.type = 'text/css';
linkEl.href = src;
const head = document.getElementsByTagName('head')[0];
head.appendChild(linkEl);
ts 编译
https://segmentfault.com/a/1190000022726471
ts代码编译,可以同时编译ES模块的现代版本和使用CommonJS模块的版本。支持前端和node。
主要配置: tsconfig.json, 分别配置es和cjs编译脚本。
tsconfig.json
```
{
"compilerOptions": {
"target": "ES2015",
"outDir": "./lib/esm",
"types": ["node"],
"module": "ES2015",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"rootDir": "./src"
},
"include": ["./src"],
}
```
tsconfig-cjs.json
```
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "CommonJS",
"outDir": "./lib/cjs"
},
}
```
设置package.json文件
```
"main": "./lib/cjs/index.js",
"module": "./lib/esm/index.js",
"files": [
"lib/"
],
```
1.0.0-alpha.33
2 years ago
1.0.56
3 years ago