Vue.js из Browserify в Webpack - PullRequest
       15

Vue.js из Browserify в Webpack

0 голосов
/ 25 февраля 2019

Наш текущий процесс сборки в настоящее время использует Grunt, vueify и browserify для создания наших однофайловых компонентов, а также извлекает Vue из SFC и в свой собственный внешний файл.

По различным причинам (vueify больше не поддерживается, асинхронная загрузка компонентов, ...) мы хотим переключиться на Webpack.

Однако мне не удается обдумать, как заставить наш текущий метод работать для Webpack.Я включил наш текущий процесс сборки ниже.Я хотел бы выяснить, как заставить Webpack работать для нас.Какие-либо предложения?Я даже не могу начать ... Как я могу заставить Webpack скомпилировать наши файлы * .vue.js в предварительно отрендеренные файлы javascript?Внизу я также включил содержимое одного из наших файлов SFC .vue.js.

vueRuntime: {
    expand: true,
    cwd: 'node_modules/vue/dist/',
    src: 'vue.runtime.min.js',
    dest: 'js/rwd/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/rwd/',
    src: '**/*.vue.js',
    dest: 'js/rwd',
    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
        }
    }
}

Пример файла * .vue.js:

const Vue = require('vue');
const App = require('./something/components/Something.vue');

new Vue(App).$mount('#app-element-id');

1 Ответ

0 голосов
/ 25 февраля 2019

Недавно выполнив аналогичную миграцию на Vue + Webpack, я нашел этот пост очень полезным: https://itnext.io/vue-js-and-webpack-4-from-scratch-part-3-3f68d2a3c127

Другим источником примеров является vue-cli .К сожалению, производимый шаблон чрезвычайно трудно расшифровать, потому что он требует тонны узловых модулей, которые вносят незначительный объем конфигурации, а также зависят от других модулей.Поэтому, если вы хотите создать что-то настроенное или узнать, как все это работает вместе, это больше проблем, чем стоит.

...