Проблема при создании приложения Vue.js 3 (бета) с Rollup: Error: Unexpected token (обратите внимание, что вам нужны плагины для импорта файлов, которые не являются JavaScript)

Я пытаюсь создать приложение Vue.js 3 (бета-версия), используя Rollup.

  • Vue.js 3.0.0-бета.15
  • Накопительный пакет 2.18.1
  • rollup-plugin-vue 6.0.0-бета.6

Я получаю это:

$ npx rollup -c rollup.config.prod.js 

src/main.js → public/dist/...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang.css (2:0)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:5154:30)
    at Module.error (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:9592:16)
    at tryParse (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:9506:23)
    at Module.setSource (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:9890:30)
    at ModuleLoader.addModuleSource (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17749:20)
    at ModuleLoader.fetchModule (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17803:9)
    at async Promise.all (index 2)
    at ModuleLoader.fetchStaticDependencies (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17827:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17804:9)
    at async Promise.all (index 3)
    at ModuleLoader.fetchStaticDependencies (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17827:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17804:9)
    at async Promise.all (index 0)

Моя конфигурация накопительного пакета:

import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import fileSize from 'rollup-plugin-filesize';
import vue from 'rollup-plugin-vue';

const plugins = [
  resolve(),

  vue({
    template: {
      isProduction: true,
      //compilerOptions: { preserveWhitespace: false }
    },
    //css: false,   // note: 'false' extracts styles as a separate '.css' file
  }),

  replace({ 'process.env.NODE_ENV': '"production"' }),

  fileSize()
];

export default {
  plugins,
  input: 'src/main.js',

  output: {
    dir: 'public/dist/',
    format: 'esm',

    globals: {
      firebaseui: "firebaseui"
    },

    sourcemap: true   // have source map even for production
  }
};

Долго искал похожие случаи, но решения пока не нашел. Кто-нибудь знает, о чем это может быть?

Источники: Источники: https://github.com/akauppi/GroundLevel-es6-firebase-web/tree/pr-prod


person akauppi    schedule 28.06.2020    source источник
comment
Используйте vite, чтобы избавить себя от необходимости настраивать Rollup. Он внутренне использует Rollup, предварительно настроенный для вас, но можно настроить пользовательские параметры Rollup. Запустите npm init vite-app my-app, чтобы создать свой проект.   -  person tony19    schedule 01.07.2020
comment
@tony19 На самом деле, да .. Однако для производства я хотел бы развернуть модули ES6, разделенные, и в настоящее время Vite (конфигурация по умолчанию) объединяет все, включая скрипты в моем index.html. Мне... это не нравится.   -  person akauppi    schedule 01.07.2020
comment
временное исправление: добавьте rollup-plugin-scss stackoverflow.com/questions/62384191/   -  person akauppi    schedule 01.07.2020