rollup打包vue组件

起因：起初的想法是想做一个线上组件库，通过单文件打包的形式，上传到线上，然后线上动态引入加载该组件。

接下来就是头脑风暴了。通过一些资料的查找，对比，觉得rollup比较符合当前的场景。所以第一步定下来了。

那么怎么样能在单一组件中执行命令，进行打包呢。

写个脚本不就可解决这个事情了吗，说干就干。

接下来就是枯燥的哒哒哒的键盘声了，此处省略...，上代码。

第一步： 新建项目，初始化。新建bin文件，下有index.js文件，如图：

代码如下：

#!/usr/bin/env node
import  { Command }   from 'commander'
const program = new Command();

program
    .name('build package')
    .command('build')
    .action(()=>{

        const build=import('../v2-upload/index.js')
        build.then(res=>res.default())
        
    })

program.parse() 

bin里的index作用是用Command结合命令行来做打包的操作。

新建文件v2-upload，包含index.js文件

 import { rollup } from 'rollup';
 import {resolve} from 'path'
 import rollResolve from 'rollup-plugin-node-resolve';
 import vuePlugin  from "rollup-plugin-vue"
 import babel from "rollup-plugin-babel"
 import commonjs from "rollup-plugin-commonjs"
 import { terser } from "rollup-plugin-terser"
 import fsExtra from 'fs-extra'
 import fs from 'fs'
 //项目所以的根目录
 let rootPath=resolve(process.cwd(),'./').substring(0,resolve(process.cwd(),'./').indexOf('src')).replace(/\\/g,'/')
 //打包输出的文件
 let pathUrl=rootPath+'dist/index.js'
 //打包输出路径
 let dirPathUrl=rootPath+'dist'
 //当前打包文件路径
 let inputPATH=resolve(process.cwd(),'./index.js')

  async function build() {

    if(fsExtra.pathExistsSync(pathUrl)){
      try{
        fsExtra.removeSync(dirPathUrl)
      }catch(err){
        console.log(err);
      }
    }

      try{
      const bundle = await rollup({
        input:inputPATH,
        external: ['vue'],
        plugins:[
          rollResolve(),
          vuePlugin ({
              css: true,
              compileTemplate: true
            }),
            babel({
              exclude: "**/node_modules/**"
            }),
            commonjs(),
            image(),
            terser()
        ]
      });

        await bundle.write({
          output:{
            file:pathUrl,
            format:"esm",
            name: 'MyBundle'
          },
        });
      
    }catch(err){
        console.log(err);
      }
  }
  
export default build

v2-uoload文件使用rollup打包单vue文件的一些配置

所需要的插接件版本如下：

需要注意的是，打包vue2，vue3所需的rollup-plugin-vue版本有些差别

rollup-plugin-vue用于处理.vue文件。vue2和vue3项目所用的rollup-plugin-vue版本不一样，vue的编译器也不一样。

vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler

vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc

接下来在package.json中加上

  "bin": {
    // 添加的命令可以自己命名，比如这里为ypm，后面的文件是第一步建的脚本文件
    "ypm": "./bin/index.js"
  },

最后一步执行npm link，看到这里，整个打包脚手架就完成了。

想法的第一个环节就算初步的完成了，后续的想法思路以及会慢慢更新...

最后，喜欢的童鞋，可以点个赞。