sfc
A set of useful commands for dealing with Vue single-file components.
Install
yarn global add sfc# or npm i -g sfc
Commands
normalize
Normalize (pre-compile) each block of your SFC:
# normalize a .vue file sfc normalize example.vue -o output.vue# normalize all .vue files inside a directory sfc normalize src -d lib # you can even normalize src/*.js files if needed src normalize src -d lib --include "*.js"
Then you can publish normalized .vue
files to npm registry without compiling them to .js
files.
Supported transforms:
<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
<style>
tag:postcss
(default): use your ownpostcss.config.js
stylus
sass
scss
- Custom blocks: nope.
Gotchas:
- We don't handle tags that use
src
attribute for now, it will be left as is.
Example
In:
<template> <div class="foo"> {{ count }} </div></template> <script>export default { data() { return { count: 0 } }}</script> <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 scoped>.foo { color: #f00;}</style>
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
sfc © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
github.com/egoist · GitHub @egoist · Twitter @_egoistlily