rollup.js打包vue组件[!] (plugin commonjs) SyntaxError: Unexpected token (2:2)

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(), // 实现生产代码压缩
    ],

在这里插入图片描述

  • 17
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值