vue-compile
Compile the blocks in Vue single-file components to JS/CSS from Babel/Sass/Stylus.
Why This Approach
You may want to publish .vue
files instead of transformed .js
files on npm because the .vue
file is preferred in some scenarioes, e.g. vue-server-renderer
can inline critical CSS from <style>
blocks.
This tool will transform each block in the .vue
file to their standard conterparts like sass
-> css
so your users don't have to install additional libraries to compile it.
It also provides a --preserve-ts-block
flag if you don't want to transpile TypeScript, because tools like Vite supports TypeScript out of the box. In this way you don't need to generate .d.ts
for your Vue components either, thanks to Volar.
Install
yarn global add vue-compile
# or
npm i -g vue-compile
Usage
# normalize a .vue file
vue-compile example.vue -o output.vue
# normalize a directory
# non .vue files will be simply copied to output directory
vue-compile src -o lib
Then you can publish normalized .vue
files to npm registry without compiling them to .js
files.
Supported transforms (via lang
attribute):
<template>
tag:html
(default)
<script>
tag:babel
(default): use our default babel preset or your own.babelrc
ts
typescript
: use our default babel preset +@babel/preset-typescript
, you can use--preserve-ts-block
flag to preserve types, i.e. disable typescript transformation
<style>
tag:postcss
(default): use your ownpostcss.config.js
stylus
sass
scss
- Custom blocks: They are not touched.
Gotchas:
- We only handle
src
attribute for<style>
blocks, we simply replace the extension with.css
and remove thelang
attribute.
Example
In:
<template>
<div class="foo">
{{ count }}
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<style lang="scss" src="./foo.scss">
<style lang="stylus" scoped>
@import './colors.styl'
.foo
color: $color
</style>
Out:
<template>
<div class="foo">
{{ count }}
</div>
</template>
<script>
export default {
data: function data() {
return {
count: 0
};
}
};
</script>
<style src="./foo.css">
<style scoped>
.foo {
color: #f00;
}
</style>
Compile Standalone CSS Files
CSS files like .css
.scss
.sass
.styl
will be compiled to output directory with .css
extension, all relevant import
statements in .js
.ts
or <script>
blocks will be changed to use .css
extension as well.
You can exclude them using the --exclude "**/*.{css,scss,sass,styl}"
flag.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
vue-compile Β© egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
github.com/egoist Β· GitHub @egoist Β· Twitter @_egoistlily