一个组件怎么构建成多个方式引用的文件？

[keroppi]

新人请教自己封装一个 JS 组件的时候，怎么在打包的时候生成使用 url 地址引用的文件、和在 npm 发布的包两个不同的文件？

就好像 github 上又很多 JS 组件，即可 <script src='somefile.js'></script> 这样引入，也可以 npm i some-pack 这样的。

ps：我这里只是指生成可以用 npm publish 发布的那个模块文件，并不是问怎么发布 NPM 包，另外用传统 URL 引入方式可能对浏览器兼容度不太一样，打包时有用到 babel 转换

[sakitamFDD]

rollup 或者 webpack，构建目标生成三种～ esm 、commonjs 、umd，其实默认 umd 就支持 node 的 commonjs 模式和浏览器的直接引入

[jifengg]

我以前自己写的时候用了一种可能不太好的方法：在代码里判断是否存在 window，是就说明是在 web 端，不是就说明是在服务端。然后根据是否 web 端来 import 和 export