这个是不是不支持vite呀（esm 内部包引入了 cjs）

[jiubanqingchen]

vite直接引入会发出警告require is not defined

[hustcc]

vite 是什么？

[jiubanqingchen]

vite 是什么？

这个是vue作者新写的一个工具，下面是摘过来的
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

作者：阿里巴巴淘系技术
链接：https://www.zhihu.com/question/394062839/answer/1496127786
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[hustcc]

vite 是什么？

这个是vue作者新写的一个工具，下面是摘过来的
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

作者：阿里巴巴淘系技术
链接：https://www.zhihu.com/question/394062839/answer/1496127786
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

利用这个，对于包有什么要求吗？有兴趣来 pr 吗？

[jiubanqingchen]

vite 是什么？

这个是vue作者新写的一个工具，下面是摘过来的
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。
作者：阿里巴巴淘系技术
链接：https://www.zhihu.com/question/394062839/answer/1496127786
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

利用这个，对于包有什么要求吗？有兴趣来 pr 吗？

我的前端功底并不怎么好，因为看到vite这个新东西所以想拿过来用用,觉得g2plot很好看而且使用方便就拿过来试试了；
我刚才仔细看了下，发现在vite对@antv/g2plot重新编译，编译过程如下

这样 vite 在执行 runOptimize 的时候中会使用 roolup 对 lodash 包重新编译，将编译成符合 esm 模块规范的新的包放入 node_modules 下的 .vite_opt_cache 中，然后配合 resolver 对 lodash 的导入进行处理：使用编译后的包内容代替原来 lodash 的包的内容，这样就解决了 vite 中不能使用 cjs 包的问题，这部分代码在 depOptimizer.ts 里。

上面这段文字出处

然后我找到了vite处理后的g2plot.js，里面有三个地方引用了package.json中的版本信息
`//var pkg$2 = require('../package.json');//这两行代码我将其替换成了下面一个2.0.7
//var version$2 =pkg$2.version;
var version$2 ='2.0.7';

var SVGEngine = /#PURE/Object.freeze({
proto: null,
version: version$2,
Shape: Shape$2,
Event: GraphEvent,
Canvas: Canvas$2,
Group: Group$1,
__moduleExports: types
});`

[jiubanqingchen]

vite 是什么？

这个是vue作者新写的一个工具，下面是摘过来的
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。
作者：阿里巴巴淘系技术
链接：https://www.zhihu.com/question/394062839/answer/1496127786
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

利用这个，对于包有什么要求吗？有兴趣来 pr 吗？

vite使用好像是需要 ES Module 库，g2plot能支持吗

[hustcc]

支持的，npm 包中有 cjs 和 esm。可能在浏览器环境没有自动识别到。你可以手动指定路径试试看。

@antv/g2plot/esm/

[jiubanqingchen]

支持的，npm 包中有 cjs 和 esm。可能在浏览器环境没有自动识别到。你可以手动指定路径试试看。

@antv/g2plot/esm/

我确实这样使用了，不过好像还是有问题
The requested module '/@modules/@antv/util/lib/is-nil.js' does not provide an export named 'default'

支持的，npm 包中有 cjs 和 esm。可能在浏览器环境没有自动识别到。你可以手动指定路径试试看。

@antv/g2plot/esm/
我今天试了一下引入esm里面的包；还有点问题 他好像需要去引入antv util中的一个js The requested module '/@modules/@antv/util/lib/is-nil.js' does not provide an export named 'default'
这个js好像并不支持es module

[hustcc]

我擦啊，内部有些包，直接引入了 cjs。。。可以帮忙排查是那个包直接引入了 lib，然后来一个 pr 呗~

[jiubanqingchen]

我擦啊，内部有些包，直接引入了 cjs。。。可以帮忙排查是那个包直接引入了 lib，然后来一个 pr 呗~

我就不做pr了吧，我找到了三个问题的地方 使用了require
node_modules@antv\g-base\esm\index.js
node_modules@antv\g-canvas\esm\index.js
node_modules@antv\g-svg\esm\index.js
这个三个地方的var pkg = require('../package.json'); 改为import引入就好了
我现在直接改的nodemoduoles