Vue.js из Browserify в Webpack

Наш текущий процесс сборки в настоящее время использует 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');

Для вашей проблемы изучение шаблонного кода — хорошее начало github.com/vuejs-шаблоны. Хотя они все в webpack 3, но необходимые пакеты должны быть одинаковыми.

blaz 25.02.2019 06:48

@blaz Да, я хорошо разобрался в этом. Кажется, мне достаточно написать вопрос о SO, чтобы начать двигаться вперед.

marcusds 25.02.2019 07:54

Я нашел решение, когда у меня будет время, я напишу ответ со ссылками на источники.

marcusds 27.02.2019 09:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
1 229
1

Ответы 1

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

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

Другие вопросы по теме