Vuetify a la carte: rollup component complains when used in static html file?

问题

I'm trying to rollup a Vue component which uses some vuetify components. For MWE purpose I have a very simple component, CountButton.vue, which is just a wrapper over <v-btn>

<template>
  <div class="">
    <v-btn @click="count"> test {{amount}} </v-btn>
  </div>
</template>

<script>
import {VBtn} from 'vuetify/lib' // <---- for tree shaking & a la carte
export default {
  components: {
    VBtn
  },
  data: () =>({
    amount: 0
  }),
  methods:{
    count() {
      this.amount += 1
    }
  }
}
</script>

I then used rollup to bundle this component with the following rollup.entry.js file:

import Vue from 'vue';
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)
import CountButton from './components/CountButton.vue'


const components = {
  CountButton,
}



function install(Vue) {
  if (install.installed) return;
  install.installed = true;

  Object.keys(components).forEach(name => {
    Vue.component(name, components[name])
  });

}

const plugin = {
  install,
}

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


export default components
export const strict = false

export {
  CountButton,
}

and rollup.config.js file:

// rollup.config.js
import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import { terser } from "rollup-plugin-terser";
import minimist from 'minimist';
import async from 'rollup-plugin-async';

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'

import css from 'rollup-plugin-css-only'
import pkg from './package.json';



const argv = minimist(process.argv.slice(2));


const config = {
  input: './dev/src/rollup.entry.js',

  external: [
    // 'vue',
  ],
  output: {
    name: 'pub',
    exports: 'named',
    globals: {
      'vue': 'Vue',
    },
  },
  plugins: [
    vue({
      compileTemplate: true,
      template: { optimizeSSR: false },
    }),

    async(),

    postcss(),

    nodeResolve({
      mainFields: [
        'module', 'main', 'jsnext',
      ]
    }),

    commonjs({
      // non-CommonJS modules will be ignored, but you can also
      // specifically include/exclude files
      include: 'node_modules/**',  // Default: undefined

      // search for files other than .js files (must already
      // be transpiled by a previous plugin!)
      extensions: [ '.js', '.coffee' ],  // Default: [ '.js' ]


      namedExports: {
      },  // Default: undefined

      // sometimes you have to leave require statements
      // unconverted. Pass an array containing the IDs
      // or a `id => boolean` function. Only use this
      // option if you know what you're doing!
      ignore: [ 'conditional-runtime-dependency' ]
    }),

    babel({
      exclude: 'node_modules/**',
      externalHelpers: true,
      runtimeHelpers: true,
      plugins: [
        ['wildcard', { exts: ['vue'], nostrip: true, },],
        // '@babel/plugin-external-helpers',
        // '@babel/plugin-transform-runtime'

      ],
      presets: [
        ['@babel/preset-env', { modules: false, },],
      ],
    }),

  ],
};


// Only minify browser (iife) version
if (argv.format === 'iife') {
  // config.plugins.push(terser()); // commented out for debugging
}

export default config;

Then, in my static HTML, I have:

<meta charset="utf-8">
<title>pub demo</title>
<!-- <script src="https://unpkg.com/vue"></script> -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">


<script src="./pub.min.js" async="false"></script>

<pub-count-button></pub-count-button>
<count-button/>

</script>

Also package.json:

{
  "name": "pub",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "build:wc": "npx vue-cli-service build --target wc --name pub 'dev/src/components/*.vue'",
    "build:r": "npm run build:r:unpkg & npm run build:r:es & npm run build:r:umd",
    "build:r:umd": "rollup --config rollup.config.js --format umd --file dist/pub.umd.js",
    "build:r:es": "rollup --config rollup.config.js --format es --file dist/pub.esm.js",
    "build:r:unpkg": "rollup --config rollup.config.js --format iife --file dist/pub.min.js"
  },
  "dependencies": {
    "core-js": "^3.4.3",
    "vue": "^2.6.10",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "^2.0.2",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0",
    "@babel/core": "^7.1.0",
    "@babel/plugin-external-helpers": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.0.0-beta.55",
    "babel-core": "7.0.0-bridge.0",
    "babel-plugin-wildcard": "^5.0.0",
    "babel-runtime": "^6.26.0",
    "core-js": "^2.6.2",
    "css": "^2.2.4",
    "from": "^0.1.7",
    "import": "0.0.6",
    "minimist": "^1.2.0",
    "nodemon": "^1.18.9",
    "register-service-worker": "^1.6.2",
    "rollup": "^0.66.2",
    "rollup-plugin-async": "^1.2.0",
    "rollup-plugin-babel": "^4.0.3",
    "rollup-plugin-commonjs": "^9.2.0",
    "rollup-plugin-css-only": "^1.0.0",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^4.3.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "rollup-plugin-terser": "5.1.2"
  }
}

The result of this example is that in index.html:

ReferenceError: process is not defined
found in pub.min.js

which corresponds to:

    var config = ({
      /**
       * Option merge strategies (used in core/util/options)
       */
      // $flow-disable-line
      optionMergeStrategies: Object.create(null),

      /**
       * Whether to suppress warnings.
       */
      silent: false,

      /**
       * Show production mode tip message on boot?
       */
      productionTip: process.env.NODE_ENV !== 'production', <---

Here is a MWE repo

How I got here? 1. have a very simple component, CountButton.vue, which is just a wrapper over the Vuetify component , imported a la carte (see dev/src/components/CountButton.vue) 2. Then I configured rollup (rollup.config.js) and tried to bundle my "package" (just this component) with /dev/src/rollup.entry.js 3. then I rolled up npm run build:r 4. then I tried to use the component: (dist/demo.html)

来源：https://stackoverflow.com/questions/59158339/vuetify-a-la-carte-rollup-component-complains-when-used-in-static-html-file