Nodejs babel+vue+rollup 集成问题： Unexpected token `<template>`

发布于 1周前 作者 yuanlaile 来自 nodejs/Nestjs

Nodejs babel+vue+rollup 集成问题： Unexpected token <template>

本来一切正常，只是想增加一个 es2017 的语法，加了 babel 就报错。问题复现： https://coding.net/u/hilojack/p/my-rollup-issue/git

➜ vue$ git:(master) ✗rollup -c -w
[!] (babel plugin) SyntaxError: /Users/hilojack/www/egg/vue/src/App.vue: Unexpected token (1:0)
src/App.vue (1:0)
SyntaxError: /Users/hilojack/www/egg/vue/src/App.vue: Unexpected token (1:0)
> 1 | <template>
    | ^
  2 |     <div class="container">
  3 |         <div class="col-md-6 col-md-offset-3">
  4 |             <h1>Vue TODO App by ahuigo</h1>

相关配置如下：

➜ vue$ git:(master) ✗cat src/.babelrc
{
  "presets": [
    [
    "latest",
    { "es2015": { "modules": false } }
    ]
  ],
  "plugins": ["external-helpers", "transform-decorators-legacy", "transform-object-rest-spread",  ],
}
➜ vue$ git:(master) ✗cat rollup.config.js
import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import VuePlugin from "rollup-plugin-vue";

import replace from ‘rollup-plugin-replace’;


import uglify from ‘rollup-plugin-uglify’;
//import postcss from ‘rollup-plugin-postcss’;


export default{
//input: “src/main.js”,
input: [“src/index.js”],
output: {
format: “esm”,
name: “myBundle”,
dir: “dist”,
//file: “dist/bundle.js”,
paths: {
d3: “https://d3js.org/d3.v4.min”,
vue: “https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.esm.browser.js”,
}


},
experimentalCodeSplitting: true,
external: ["lodash", "d3","vue"],
watch: {
    //exclude: ['node_modules/**', 'dist/**',], //default  ignore
    include: ['src/**','src/App.vue'],
},
plugins:[
    babel({ exclude: 'node_modules/**' }),
    json(),
    //resolve({ jsnext: true, main: true, browser: true, }),
    resolve({ browser: true, }),
    commonjs(),
    VuePlugin(),
    replace({
      exclude: 'node_modules/**',
      ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
    }),
    (process.env.NODE_ENV === 'production' &amp;&amp; uglify()),
],

};


Harmonyos Next教程
1 回复

在Node.js环境中使用Babel、Vue和Rollup进行集成时遇到“Unexpected token <template>”错误，通常是因为Rollup的配置没有正确设置以处理Vue单文件组件（.vue文件）。以下是一个基本的配置示例，可以帮助你解决这个问题。

首先，确保你已经安装了必要的依赖：

npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve @vue/compiler-sfc vue

然后，配置Rollup（rollup.config.js）：

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import vue from 'rollup-plugin-vue';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**' // 只编译我们的源码
    }),
    vue({
      compileTemplate: true,
      css: true // 处理CSS
    })
  ]
};

在这个配置中，rollup-plugin-vue插件负责处理Vue文件，包括模板编译和CSS处理。确保你的main.js文件正确地引入了Vue组件。

此外，检查你的Babel配置（.babelrc或babel.config.json），确保它支持最新的JavaScript语法，特别是如果你使用了ES6+的特性。

如果问题仍然存在，请检查.vue文件的语法是否正确，并确保所有相关依赖都是最新的。

回到顶部