Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
A Rollup from 0 to 1 overhand front-end component library development | VUE component compilation
The above review
- Rollup from 0 to 1 to fit the front-end component library development | started
- A Rollup from 0 to 1 overhand front-end component library development | module builds
- A Rollup from 0 to 1 overhand front-end component library development | tree – shaking mechanism
- A Rollup from 0 to 1 overhand front-end component library development | external properties
- A Rollup from 0 to 1 overhand front-end component library development | CJS plug-in
- Rollup from 0 to 1 to fit the front-end component library development | common plug-in
How to parse and compile vue files
Try using Rollup to package Vue files
-
First, create a simple Vue3 component
Create the test. vue file in the SRC directory
<template>
<div class="test">{{message}}</div>
</template>
<script>
export default {
name: "TestComponent",
setup() {
const message = 'hello rollup'
return {
message
}
}
}
</script>
<style scoped lang="scss">
.test {
color: blue;
}
</style>
Copy the code- Define components in index.js
import Test from './Test.vue'
export default function (Vue) {
Vue.component(Test.name, Test)
}
Copy the code- Directly through
npm run buildTo build
NPM run build > [email protected] build > rollup -c rollup.config.dev.js / Users/PM/adtech/PC/payfun rollbear. View/SRC/index. The js/Users/PM/adtech/PC/payfun rollbear. View/SRC/index, js - > dist/payfun.rollbear.dev.js, dist/payfun.rollbear.dev.es.js...# error ~!
# [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
# src/Test.vue (1:0)
Copy the codeThe test. vue file is not supported by Rollup packaging by default and requires the Vue plug-in to support it
How does Rollup support vUE file packaging
Installing a plug-in
yarn add rollup-plugin-vue -D
"rollup-plugin-vue": "^ 6.0.0" Vue3 component package compilation is supported
Copy the codeAdd support for.vue files to configuration files
vim rollup.config.dev.js
const path = require('path')
const resolve = require("rollup-plugin-node-resolve")
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
// The vue plugin is introduced here
const vue = require('rollup-plugin-vue')
const inputPath = path.resolve(__dirname, "./src/index.js") // Input path
const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.js") // Output path
const outputEsPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.es.js") // Output path
console.log(inputPath)
module.exports = {
input: inputPath,
output: [{file: outputUmdPath, // Output path
format: 'umd'.// Output module protocol UMD
name: "payfunRollbear" // Module name
},
{
file: outputEsPath, // Output path
format: 'es'.// The output module protocol es
name: "payfunRollbear" // Module name}].plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**'.// Specify which folders are not compiled with Babel
}),
json(),
vue(), // Use the Vue plugin].external: ['decimal.js'].// specifies which modules are external references, even if resolve is enabled
}
Copy the codeTry yarn Build again
NPM run build > [email protected] build > rollup -c rollup.config.dev.js [!] Error: rollup-plugin-vue requires @vue/compiler-sfc to be presentin the dependency tree.
Copy the codeRollup-plugin-vue requires the dependency of @vue/ Compiler-sFC
Install @ vue/compiler – SFC
yarn add @vue/compiler-sfc -D
There is no need to use rollup-plugin-vue manually after installation
To highlight!!!!!! Rollup’s plugin is in order! Vue must be called first or an error will be reported
plugins: [
vue(), // Vue comes first
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**'.// Specify which folders are not compiled with Babel
}),
json(),
postcss({
plugins: []})],Copy the codeYarn again build
yarn build [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src/Test.vue? vue&type=style&index=0&id=07bdddea&scoped=true&lang.scss (2:0)
1:
2: .test {
^
3: color: blue;
4: }
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Copy the codeAt this point we find that the style file cannot be parsed. We can currently parse the.vue file, but the style part is not recognized
throughrollup-plugin-postcss Plugin to solve the problem of style recognition
yarn add rollup-plugin-postcss -D
Add postCSS to the configuration
// ...
const vue = require('rollup-plugin-vue')
// Add the postCSS plug-in
const postcss = require('rollup-plugin-postcss')
// ...
module.exports = {
// ...
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**'.// Specify which folders are not compiled with Babel
}),
json(),
vue(),
postcss({
plugins: []})],// ...
}
/ /...
Copy the codeRun yarn Build again
Error again ~!
[!] (plugin postcss) Error: You need to install one of the following packages:"node-sass"."sass" in order to process SASS files
Copy the codeHere we find that we need to install either Node-sass or sass
The installationsass (dart-sass)
yarn add sass -D
Compile again
created rollbear.dev.js, rollbear.dev.es.js in2.8 s ✨ Donein5.00 s.Copy the codeSuccess at last!
View the compilation result of ES module
import { openBlock, createElementBlock, toDisplayString } from 'vue';
var script = {
name: "TestComponent".setup: function setup() {
var message = 'hello rollup';
return {
message: message }; }};var _hoisted_1 = {
"class": "test"
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1, toDisplayString($setup.message), 1
/* TEXT */
);
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if(! css ||typeof document= = ='undefined') { return; }
var head = document.head || document.getElementsByTagName('head') [0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else{ head.appendChild(style); }}else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css)); }}var css_248z = ".test[data-v-07bdddea] {\n color: blue;\n}";
styleInject(css_248z);
script.render = render;
script.__scopeId = "data-v-07bdddea";
script.__file = "src/Test.vue";
function index (Vue) {
Vue.component(script.name, script);
}
export { index as default };
Copy the codeBecause we used external: [‘vue’], the vue source code will not be packaged into our files
At this point, the compilation of Vue files is realized ~!
conclusion
Steps to compile the.vue component
- Install and configure the Vue plug-in
yarn add rollup-plugin-vue -D - Install vUE plug-in dependencies
yarn add @vue/compiler-sfc -D- The plugin that emphasizes rollup has an order of execution, with vue called first
- Install the PostCSS plugin to support style
- Sass is installed to support sASS preprocessors
Warning problem resolution
After successfully compiling the.vue file we found two yellow warnings on terminal
(!) Unresolved dependencies
# vue is useless, you can ignore it
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
vue (guessing 'vue')
Add globals to outputOutput: [{file: outputUmdPath, // output path format:'umd'// Output module protocol umd name:"payfunRollbear"// Module name globals: {vue:'Vue'}},]Copy the code