Свернуть проект встраивания Vue в обычный HTML

Question

У меня есть приложение Vue, и я использую накопительный пакет в качестве сборщика. Что я хочу сделать, так это иметь возможность импортировать связанный файл min.js на любой html-сайт, чтобы приложение можно было легко встроить. У меня уже есть это на npm, но я хочу, чтобы люди без Node могли его встроить.

Мой пакет отлично работает для NPM, но когда я пытаюсь импортировать пакет непосредственно в html, я получаю сообщение об ошибке axios is not defined, но когда я пытаюсь объединить пакеты узла с node-resolve Я получаю эту ошибку: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) и пакет даже не создан.

Это правильный подход или есть лучший способ сделать это? Спасибо

Моя файловая структура выглядит следующим образом:

build
--rollup.config.js
dist
--player.min.js
--player.umd.js
--player.esm.js
node_modules
--<all_packages>
src
--<several .Vue components>
--Player.vue (Main file)
--wrapper.js (Wraps project and exports the player)

rollup.config.js:

import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
import replace from '@rollup/plugin-replace';
import image from '@rollup/plugin-image';
import 'dotenv/config';

export default {
    input: 'src/wrapper.js', // Path relative to package.json
    output: {
        name: 'Player',
        exports: 'named',
    },
    plugins: [
        replace({
          'process.env.VUE_APP_ENV': JSON.stringify(process.env.VUE_APP_ENV),
          'process.env.VUE_APP_ROOT_API': JSON.stringify(process.env.VUE_APP_ROOT_API)
        }),
        commonjs(),
        vue({
            css: true, // Dynamically inject css as a <style> tag
            compileTemplate: true, // Explicitly convert template to render function
        }),
        buble({
          transforms: {
            forOf: false
          }
        }), // Transpile to ES5
        image()
    ],
};

Wrapper.js выглядит следующим образом:

// Import vue component
import player from './Player.vue'

// Declare install function executed by Vue.use()
export function install (Vue) {
  if (install.installed) return
  install.installed = true
  Vue.component('Player', player)
}

// Create module definition for Vue.use()
const plugin = {
  install
}

// Auto-install when vue is found (eg. in browser via <script> tag)

let GlobalVue = null
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue
}
if (GlobalVue) {
  GlobalVue.use(plugin)
}

// To allow use as module (npm/webpack/etc.) export component
export default player

Свернуть проект встраивания Vue в обычный HTML

Ответы (0)