tsdx 打包ts项目

问题：sdk项目里面有node代码和浏览器代码，打包产物要同时支持两个平台。

解决思路：参考axios实现方式。

axios如何方式：

axios源码目录：

axios在浏览器平台请求接口使用的是XMLHttpRequest，在node平台使用的是node自带的http模块。

如果我们按照正常打包，肯定会把node平台代码打包到浏览器环境。

自己通过debug，发现在浏览器环境

const knownAdapters = {
  http: httpAdapter,
  xhr: xhrAdapter
}

等价于
const knownAdapters = {
  http:null,
  xhr: xhrAdapter
}

也就是在浏览器环境，axios并没有把node环境代码打包到产物里面。那它是怎么实现的呢？继续看：

玄机就在这，axios使用的rollup打包，

在package.json中，browser字段通常用于指定一个映射表，来告诉打包工具（如Rollup、Webpack等）在浏览器环境下使用哪些特定的模块版本，而不是Node.js环境中的版本。

这里我的理解就是文件替换，打包时候在浏览器环境会把http.js替换成null.js。

但是自己试了之后发现并不能生效，最后发现还有一个玄机：

rollup打包插件@rollup/plugin-node-resolve

最后还是你们自己去看下原文，下面是我的理解：

import resolve from '@rollup/plugin-node-resolve';


 plugins: [
      resolve({browser}),
    ]

当browser字段设置为true时候，rollup打包时候才会去读package.json中的browser配置。

找个时候可以查看axios中rollup打包配置文件rollup.config.js，可以发现在浏览器环境该属性都为true，node环境该属性为false。

node环境配置：

浏览器环境配置：

到此axios打兼容浏览器环境和node环境的原理就搞清楚了。

还有后续。。。。。。。