Detalhes do pacote

esbuild-vue

apeschar34.7kISC1.2.2

This plugin lets you import [Vue single-file components][sfc] when bundling with [esbuild]. This plugin works with Vue 2.

readme (leia-me)

esbuild-vue

This plugin lets you import Vue single-file components when bundling with esbuild. This plugin works with Vue 2.

Multiple Vue imports are built in parallel using Node.js' worker_threads via Piscina.

Installation

yarn add esbuild-vue

Getting started

In order to use esbuild plugins, you must use esbuild's JavaScript API, instead of the command line.

Let's assume you have a Component.vue, and a main.js that uses it somehow:

# Component.vue
<template>
    <h1>Hello, World!</h1>
</template>

# main.js
import Component from './Component.vue';
import Vue from 'vue';

new Vue({
    el: '#app',
    render: h => h(Component),
});

First, install the plugin, esbuild and Vue:

yarn add esbuild-vue esbuild vue

Next, create a build script build.js:

const vuePlugin = require('esbuild-vue');

require('esbuild').build({
    entryPoints: ['main.js'],
    bundle: true,
    outfile: 'out.js',
    plugins: [vuePlugin()],
    define: {
        "process.env.NODE_ENV": JSON.stringify("development"),
    },
});

Then run it:

node build.js

Now, loading index.html should display your component in its full glory.

<!-- index.html -->
<!doctype html>
<div id="app"></div>
<script src="out.js"></script>

Configuration

An object containing configuration options may be passed into the plugin constructor vuePlugin. For example:

vuePlugin({
    extractCss: true,
    workers: false,
    onReadFile: path => {
        console.error("The following dependency was used:", path);
    }
})

The following options are available:

  • extractCss: Output a separate file for inline <style> blocks in single-file components.
  • workers: The maximum amount of worker threads to use for compilation. By default this is 4 or the amount of CPUs available, whichever is least. (During my testing, larger amounts of threads don't provide a performance improvement.) Use false to disable multithreading.
  • onReadFile: Will be called with the (non-normalized) paths of every file read during the compilation process. For example, external files included using @import declarations in <style> blocks.
  • postcssPlugins: PostCSS plugins which will be used when compiling <style> blocks in components.
  • isAsync: By default, components are compiled using the synchronous (non-async) compiler. If you use async PostCSS plugins, you need to specify true here.
  • assembleOptions: Allows to provide custom normalizer, styleInjector and styleInjectorSSR implementations (upstream docs).

changelog (log de mudanças)

Change log

1.2.2 - 2022-09-12

  • Set resolveDir for extracted CSS so that relative URLs work.

1.2.1 - 2022-02-07

  • Remove use of optional chaining operator in order to support Node.js 12.

1.2.0 - 2022-02-04

  • Add support for assembleOptions.

1.1.2 - 2022-01-11

  • Cause component.__file to contain the filename of the *.vue file, instead of its contents.

1.1.1 - 2022-01-10

  • Don't strip comments from <script> contents. This will cause errors when you have export default in a comment, but this needs to be fixed in the Vue compiler.

1.1.0 - 2022-01-04

  • Add support for TypeScript via <script lang="ts">.
  • Strip comments from <script> contents to prevent commented export default declaration from triggering errors.

1.0.0 - 2021-11-25

  • Add support for PostCSS plugins.

0.4.1 - 2021-11-23

  • Output a code fragment for template errors.

0.4.0 - 2021-09-07

  • Add extractCss to allow generating a separate CSS file instead of inlining styles in the generated JavaScript.

0.3.3 - 2021-06-14

  • vue-template-compiler is now a peer dependency to avoid version conflicts with Vue.

0.3.2 - 2021-06-08

  • Correctly propagate Vue component compiler exceptions to esbuild log.
  • Detect empty input files so we get a clearer error message.

0.3.1 - 2021-05-18

  • Add onReadFile for tracking dependencies.

0.3.0 - 2021-03-23

  • Fail build when <style> element contains errors.
  • Allow building components without a <template> element.

0.2.0 - 2021-03-15

  • Parallelize compilation via worker_thread.

0.1.0 - 2021-03-15

  • Initial release.