将 Vue 运行时与 Browserify 的单个文件组件分开包含答案

【问题标题】：Include Vue runtime separately than single file component with Browserify将 Vue 运行时与 Browserify 的单个文件组件分开包含
【发布时间】：2019-04-22 12:55:41
【问题描述】：

我目前正在使用 Browserify 将我的 .vue 文件构建成单个文件组件。唯一的问题是每个 SFC 都将 Vue 运行时包含到文件中，导致文件大小比它需要的大得多，因为 Vue 运行时是跨多个页面和 SFC 的通用代码。

我希望使用 Browserify 将其分离出来并跨页面加载共同点。

我已经阅读了很多关于该主题的不同文章，但都无法使它们发挥作用。

这是我构建 Vue SFC 并排除运行时的方式：

b
    .transform('vueify')
    .transform(
        {global: true},
        envify({NODE_ENV: 'production'})
    )
    .external('vue')
    .bundle()

然后我想像这样单独加载 Javascript：

<script src="vue.runtime.min.js"></script>
<script src="built-sfc.js"></script>

我尝试了一大堆不同的构建 SFC 和 Vue 运行时的组合，但没有任何效果，而且我的想法已经用完了！

【问题讨论】：

标签： vue.js browserify grunt-browserify

【解决方案1】：

我最终弄明白了，部分问题是我们在 Grunt 的 Vue 构建中的其他问题。

但这是我们用于分别构建运行时和 SFC 的 Grunt 命令

vueRuntime: {
    expand: true,
    cwd: 'node_modules/vue/dist/',
    src: 'vue.runtime.min.js',
    dest: 'js/libs',
    ext: '.js',
    extDot: 'first',
    options: {
        configure: b => b
            .require('vue')
            .transform(
                // Required in order to process node_modules files
                {global: true},
                envify({NODE_ENV: 'production'})
            )
            .bundle(),
        browserifyOptions: {
            debug: false
        }
    }
},
vue: {
    expand: true,
    cwd: 'js/pages/',
    src: '**/*.vue.js',
    dest: 'js/pages',
    ext: '.js',
    extDot: 'first',
    options: {
        configure: b => b
            .transform('vueify')
            .transform(
                // Required in order to process node_modules files
                {global: true},
                envify({NODE_ENV: 'production'})
            )
            .external('vue')
            .bundle(),
        browserifyOptions: {
            debug: false
        }
    }
}

【讨论】：