Синтаксис синтаксиса одиночных файлов Vue создает уникальную загадку для участников задач, так как два отдельных конвейера (JS и CSS) находятся в одном файле.
Теперь я знаю, что с помощью инструмента командной строки Browserify выполняется следующее:
browserify -t vueify -p [ vueify/plugins/extract-css -o dist/app.css ] -e src/index.js | uglifyjs -o dist/app.js
Это создает два выходных файла: app.css и app.js, а при загрузке в браузере он отображает мой компонент со стилем, как ожидалось
Теперь я хочу улучшить этот вывод. Как вы можете видеть в этом примере, я беру JS, который сгенерировал и передал его в uglifyjs - его минимизацию при подготовке к производству. Однако таких преобразований, применяемых к CSS, нет. Он не минимизирован, ненужный CSS не удаляется, автоматическое префикса не выполняется и т.д.
Поскольку скрипты NPM позволяют вам запускать только одну команду, мне казалось, что то, что я хочу, может быть невозможно в одной команде командной строки. Мне нужна команда one для извлечения CSS и другого, чтобы изменить ее - стиль Grunt/ Gulp.
Это привело меня к использованию Gulp в моем проекте.
Используя плагин Vueify extract-css, я могу сбросить этот CSS в файл следующим образом:
browserify('./main.js')
.transform('vueify')
.plugin('vueify/plugins/extract-css', {
out: 'dist/bundle.css'
})
.bundle()
Это вытягивается непосредственно из документация Vueify, хотя они упоминают, что out "также может быть записываемым потоком" без каких-либо примеров для что они подразумевают под этим или как это сделать.
Вот где я столкнулся с моей первой проблемой. Этот крошечный бит кода примера не работал у меня:
const gulp = require("gulp");
const browserify = require("browserify");
const source = require("vinyl-source-stream");
const buffer = require("vinyl-buffer");
gulp.task("default", function() {
browserify("src/index.js")
.transform("vueify")
.plugin("vueify/plugins/extract-css", {
out: "dist/app.css"
})
.bundle()
.pipe(source("app.js"))
.pipe(buffer())
.pipe(gulp.dest("dist"));
});
Этот чрезвычайно простой пример (который, как я мог сказать, сделал то же самое, что и мой NPM script), не работал, заставив браузер сбросить следующую ошибку:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
Хуже того, передав параметр {debug: true}, чтобы увидеть, что может произойти неправильно, вы получите несущественную карту источника:
Это не похоже на мой исходный код:
Что я делаю неправильно и почему очень простой пример с ошибкой extract-css?
Update
На прошлой неделе я быстро пытался перебирать различные эксперименты с помощью разных бустеров JavaScript и создавать инструменты, и мои различные вопросы StackOverflow остались без ответа, несмотря на то, что предлагали награды, поэтому после 4-5 дней ответа и отсутствия решения Я отказывался от проектов и двигался дальше.
Это означает, что для того, чтобы вытащить исходный код и показать, что я делал в прошлый раз, я должен повторно клонировать репо или повторно запускать команды Yeoman и возвращаться к исходному сломанному состоянию.
В этом случае этой конкретной проблемы, следуя точным шагам из моего документа "как воспроизвести" блокнота, он не смог воспроизвести. Я много экспериментировал и выяснил, что происходит .
Прежде всего, все мои исходные файлы:
Источник
index.html
<html>
<head>
<link rel="stylesheet" href="/app.css" />
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
index.js:
const Vue = require("vue");
const VueRouter = require("vue-router");
const App = require("./App.vue");
Vue.use(VueRouter);
const router = new VueRouter(require("./router"));
const app = new Vue({
el: "#app",
render: function(create) { create(App); }
});
маршрутизатор/index.js:
export default {routes: []};
App.vue:
<template>
<div id="app">
<p>Test</p>
</div>
</template>
<script>
export default {
};
</script>
<style lang="sass" scoped">
#app {
background-color: #f00;
}
</style>
Исследование
Как я уже упоминал, это забросило ошибку раньше, но теперь она отлично работала. Проведя некоторое расследование, сначала там была ошибка:
Failed to mount component: template or render function not defined.
Эта ошибка чаще всего возникает при использовании Vue Runtime вместо Vue Compiler
Тем не менее, это было не мое дело. Поскольку я не использую шаблон, я использую функцию визуализации - и она присутствовала (и работала при использовании браузера из командной строки). Вместо этого странный источник отображает намек на то, где моя проблема могла жить. Прочитав изображение, я разместил его более тщательно, пытаясь загрузить vue-hot-reload-api. Это инструмент, с которым я начал экспериментировать, но сдался, так как это вызывало у меня проблемы.
Я считаю, что когда я удалил этот модуль, мне не удалось удалить все ссылки на него, и поэтому Browserify пытался связать его со всем остальным. Не имея возможности найти модуль в node_modules, Browserify по умолчанию полагает, что он является внешним модулем и оставляет код в уродливом формате, который вы видите выше. Тот факт, что это произошло только при запуске Gulp, а не при запуске через командную строку, может быть объяснено содержимым каталога node_modules/.bin - если он не синхронизировался после запуска npm uninstall.
Я считаю, что если бы я удалил свою папку node_modules и запустил npm install, проблема сама бы разрешилась.
