Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-compile
Compile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.
https://github.com/egoist/vue-compile
Last synced: about 2 months ago
JSON representation
Compile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.
- Host: GitHub
- URL: https://github.com/egoist/vue-compile
- Owner: egoist
- License: mit
- Created: 2018-05-07T09:18:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:06:59.000Z (over 1 year ago)
- Last Synced: 2024-07-24T15:03:20.129Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.21 MB
- Stars: 159
- Watchers: 4
- Forks: 10
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - vue-compile - file components to use JS/CSS instead of Babel/Sass/Stylus. | egoist | 158 | (TypeScript)
README
# 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 `` 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](https://github.com/johnsoncodehk/volar).
## Install
```bash
yarn global add vue-compile
# or
npm i -g vue-compile
```
## Usage
```bash
# 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](./lib/babel/preset.js) or your own `.babelrc`
- `ts` `typescript`: use our default [babel preset](./lib/babel/preset.js) + `@babel/preset-typescript`, you can use `--preserve-ts-block` flag to preserve types, i.e. disable typescript transformation
- `<style>` tag:
- `postcss` (default): use your own `postcss.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 the `lang` attribute.
<details><summary>Example</summary><br>
In:
```vue
<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
```
Out:
```vue
{{ count }}
export default {
data: function data() {
return {
count: 0
};
}
};
<style scoped>
.foo {
color: #f00;
}
```
### 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 `` blocks will be changed to use `.css` extension as well.
You can exclude them using the `--exclude "**/*.{css,scss,sass,styl}"` flag.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**vue-compile** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-compile/contributors)).
> [github.com/egoist](https://github.com/egoist) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)