webpack打包

测试有序列表

1. 测试1
2. 测试2
3. 测试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/"
  ],
  ```