如何将.vue 文件编译成 es mdule 使用？

[konnga403]

技术栈：vue2+element-ui+vue-cli4

需求：现在项目上需要拆分代码，我想通过 lerna 管理前端的业务模块代码，抽离一个主要的模块，编译过后，通过 npm 包的形式来给其他业务模块使用。

现在的方式： 我目前通过 vue.config.js 配置 webpack，打包出 lib 文件，现在可以满足上面的需求；但是必须不能抽离公共文件，也就是：config.optimization.delete('splitChunks') 这样导致 lib 文件过大，不删除 splitChunks 的话，打包出来的文件运行报错，无法使用。

我在想，能不能仅编译.vue 文件成.js 文件，符合 es module 的形式来直接使用呢？ 请教一下各位大佬🙏

[ruoxie]

打 npm 包的话，用 rollup 吧，之前做组件库打包的时候 webpack 打包不出 esm，就改用了 rollup 。打包.vue ，.tsx ，.jsx 都没有问题

[erwin985211]

能够打包成 js，你看 vuecli3 的文档里有 整个项目打包一个 js 封装成一个 Web Components 来用

[Reapper]

我之前也想做这样的功能，但是没找到方案。rollup 好像是个不错的方法，感谢一楼！

[konnga403]

@ruoxie 我原来打包组件库的时候也是用的 vue-cli 直接处理，vue 配置文件中，配置多个入口，不用 splitChunks，打包出来的组件文件是 es 模块可用的，但就是体积很大；我去试试 rollup，感谢。

[konnga403]

@erwin985211 这样是把所有文件打包在一起使用了，我想的是像组件库那样，引用具体的模块。react+lerna 做过，但是 vue 要处理.vue 文件，不像 react 那样直接用 babel 编译就行...

[konnga403]

@Reapper 老哥有结果分享一下呀

[em2046]

可以参考官方 ui 项目的做法，也是使用的 rollup 打包
https://github.com/vuejs/ui
不过如果想要 css 也能按需加载，就得参考目前流行的其他组件库的写法了，如 https://github.com/ant-design/babel-plugin-import