fis3-parser-vue-component

FIS3 parser 阶段插件，用于在fis3中编译Vue组件。

注意

版本： >=4.10.0 <5.0.0对应vue@1.x, 版本>= 5.1.0对应vue@2.x。
css依赖：css的依赖应该写在js中(如：require('xxx.css')), js中依赖的css优先于style标签。
FIS3 构建过程分为单文件编译和打包过程，fis.match('component/**.vue:js')这种配置属于片段编译，对应于单文件编译阶段，配置release等属性无效。打包过程的属性和插件应该针对fis.match('component/**.vue')和fis.match('component/**.css')配置。（具体见后面使用方法）

使用方法

安装

npm install fis3-parser-vue-component --save-dev

基础配置

fis.match('src/**.vue', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  parser: [
    fis.plugin('vue-component', {
      // vue@2.x runtimeOnly
      runtimeOnly: true,          // vue@2.x 有润timeOnly模式，为ture时，template会在构建时转为render方法

      // styleNameJoin
      styleNameJoin: '',          // 样式文件命名连接符 `component-xx-a.css`

      // css scoped
      ccssScopedFlag: '__vuec__', // 组件scoped占位符
      cssScopedIdPrefix: '_v-',   // hash前缀：_v-23j232jj
      cssScopedHashType: 'sum',   // hash生成模式，num：使用`hash-sum`, md5: 使用`fis.util.md5`
      cssScopedHashLength: 8,     // hash 长度，cssScopedHashType为md5时有效
    })
  ],
});

ES2015, coffee 等

// vue组件中ES2015处理
fis.match('src/**.vue:js', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  parser: [
    fis.plugin('babel-6.x', {
      presets: ['es2015-loose', 'react', 'stage-3']
    }),
    fis.plugin('translate-es3ify', null, 'append')
  ]
});

// vue组件中coffee片段处理。
fis.match('src/**.vue:coffee', {
  parser: [
    fis.plugin('cooffe')
  ]
})

LESS, SASS 等

fis.match('src/**.vue:less', {
  rExt: 'css',
  parser: [fis.plugin('less-2.x')],
  postprocessor: fis.plugin('autoprefixer')
});

fis.match('src/{**.vue:scss}', {
  rExt: 'css',
  parser: [
    fis.plugin('node-sass', {
      sourceMap: true
    })
  ],
  postprocessor: fis.plugin('autoprefixer'),
});

Jade 等

fis.match('src/**.vue:jade', {
  parser: [
    fis.plugin('jade', {
      //
    })
  ]
})

产出，打包

fis.match('src/(**).vue', {
  release: 'static/vue/$1.js'
});

fis.match('src/(component/**.css)', {
  packTo: 'component-all.css',
  release: 'static/$1'
});

原理

参考vue-loader源码，结合fis3的编译特性而编写,下面是parser阶段的主要过程：

解析vue文件，找到其中的style,'template','script'标签。
每一个style标签创建一个对应的虚拟文件，后缀为lang属性指定，默认css，你可以指定less或其它的后缀。对创建虚拟文件，一样会进行fis3的编译流程（属性lang的值决定该文件怎么编译），并加入当前文件的依赖。
template标签的内容为Vue组件的模板，template标签同样有lang属性，默认html，会进行html特性处理，模板的内容最终会输出到module.exports.template中。
script标签为文件最后输出的内容(加入模板字符串)，支持lang属性。

组件编写规范

style标签可以有多个，template和script标签只能有一个，具体请参考vue 单文件组件。

css scoped支持

为了保证每一个组件样式的独立性，是当前组件定义的样式只在当前的组件内生效，引入css scoped机制。

在模板的元素上（一般是根节点）加上scoped标志(class,attr,id)，默认为__vuec__，你可以通过cssScopedFlag自定义。可以加在class，或者属性，或者id。

<template>
  <div class="test" __vuec__></div>
  <div class="test __vuec__"></div>
</template>

在样式中使用scoped标志。

.test[__vuec__] {
  //
}
// or
.other.__vuec__ {

}
// or
.__vuec__ {
  .a {

  }
}

scoped标志会根据文件路径生成唯一的hash字符串（如：_v-23j232jj ）;
配置：scoped标志默认为__vuec__，你可以自定义。

测试demo

test 对应vue1， test2对应vue2

npm install

cd test, 编写代码…

npm install

fis3 release

fis3 server start

Vue2 JSX支持：

使用vue 官方 babel插件babel-plugin-transform-vue-jsx.

vue文件：

<script lang="jsx">
export default {
  render (h) {
    return (
      <div
        // normal attributes or component props.
        id="foo"
        // DOM properties are prefixed with domProps-
        domProps-innerHTML="bar"
        // event listeners are prefixed with on- or nativeOn-
        on-click={this.clickHandler}
        nativeOn-click={this.nativeClickHandler}
        // other special top-level properties
        class={{ foo: true, bar: false }}
        style={{ color: 'red', fontSize: '14px' }}
        key="key"
        ref="ref"
        slot="slot">
      </div>
    )
  }
}
</script>

安装babel插件：

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  --save-dev

fis相关配置

// vue组件中jsx片段处理。
fis.match('src/**.vue:jsx', {
  parser: [
    fis.plugin('babel-6.x', {
      presets: ['es2015-loose', 'stage-3'],
      plugins: ["transform-vue-jsx"]
    }),
    //fis.plugin('translate-es3ify', null, 'append')
  ]
})

huangyingwen/fis3-parser-vue-component

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages