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

2018-09-03 14:51:22 +08:00
 a132811

本来一切正常,只是想增加一个 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' && uglify()),
    ],
};
3701 次点击
所在节点    Node.js
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/485653

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX