rollup.js 打包错误

安装插件及依赖

1.rollup-plugin-vue
2.@vue/compiler-sfc
3.rollup-plugin-postcss
4.npm i -D sass

#rollup.config.dev.js 配置

const vue = require('rollup-plugin-vue');
const postcss=require('rollup-plugin-postcss');
module.exports={
    input:inputPath,
    output:[
        {
            file:  outputPathes,
            format:'es',
            name:'imocccDatav',
            globals:{
                vue:'vue'
            }
          },
          
          ],
          plugins:[ //有顺序
        resolve(), //解决第三方依赖打包问题
        commonjs(), // commonjs 语法模块
        json(),  //正确实现json 文件打包
         //打包vue 组件
        postcss({
            plugins:[]
        }), 
        terser(), // 实现生产代码压缩
        vue(),
        babel(({
            exclude:'node_modules/**'
        })),
    ],

用到的插件依赖都安装了,依然报错
在这里插入图片描述

气人不气人,有vue插件还报错。

[!] (plugin commonjs) SyntaxError: Unexpected token (2:2) in C:\Users\admin\Desktop\ts\ruleup\src\test.vue?vue&type=template&id=0f72a62a&lang.js
src\test.vue?vue&type=template&id=0f72a62a&lang.js (2:2)
1:
2:   <div class="box">
     ^
3:       {{data}}
4:   </div>

原因就是 plugin 有序啊,vue要在前面调用。。。。

plugins:[ //有顺序
        vue(),
        babel(({
            exclude:'node_modules/**'
        })),
        resolve(), //解决第三方依赖打包问题
        commonjs(), // commonjs 语法模块
        json(), //正确实现json 文件打包
       
         //打包vue 组件
        postcss({
            plugins:[]
        }), 
        terser(), // 实现生产代码压缩
    ],

在这里插入图片描述

Logo

前往低代码交流专区