这是一个创建于 1585 天前的主题，其中的信息可能已经有所发展或是发生改变。
技术栈：vue2+element-ui+vue-cli4
需求：现在项目上需要拆分代码，我想通过 lerna 管理前端的业务模块代码，抽离一个主要的模块，编译过后，通过 npm 包的形式来给其他业务模块使用。
现在的方式： 我目前通过 vue.config.js 配置 webpack，打包出 lib 文件，现在可以满足上面的需求；但是必须不能抽离公共文件，也就是：config.optimization.delete('splitChunks') 这样导致 lib 文件过大，不删除 splitChunks 的话，打包出来的文件运行报错，无法使用。
我在想，能不能仅编译.vue 文件成.js 文件，符合 es module 的形式来直接使用呢？ 请教一下各位大佬🙏
 |
1
ruoxie 2020-08-25 19:11:22 +08:00
打 npm 包的话，用 rollup 吧，之前做组件库打包的时候 webpack 打包不出 esm，就改用了 rollup 。打包.vue ，.tsx ，.jsx 都没有问题
|
 |
2
erwin985211 2020-08-25 19:25:21 +08:00
能够打包成 js，你看 vuecli3 的文档里有 整个项目打包一个 js 封装成一个 Web Components 来用
|
 |
3
Reapper 2020-08-26 09:12:20 +08:00
我之前也想做这样的功能，但是没找到方案。rollup 好像是个不错的方法，感谢一楼！
|
 |
4
konnga403 OP @ruoxie 我原来打包组件库的时候也是用的 vue-cli 直接处理，vue 配置文件中，配置多个入口，不用 splitChunks，打包出来的组件文件是 es 模块可用的，但就是体积很大；我去试试 rollup，感谢。
|
|
5
konnga403 OP @erwin985211 这样是把所有文件打包在一起使用了，我想的是像组件库那样，引用具体的模块。react+lerna 做过，但是 vue 要处理.vue 文件，不像 react 那样直接用 babel 编译就行...
|
 |
7
em2046 2020-08-26 12:42:42 +08:00
可以参考官方 ui 项目的做法，也是使用的 rollup 打包
https://github.com/vuejs/ui 不过如果想要 css 也能按需加载，就得参考目前流行的其他组件库的写法了，如 https://github.com/ant-design/babel-plugin-import |
Select Language