技术栈: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 |