fis3-parser-vue2-component v5.4.0

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 有runtimeOnly模式，为true时，template会在构建时转为render方法

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

      extractCSS: true,           // 是否将css生成新的文件, 如果为false, 则会内联到js中

      // css scoped
      cssScopedIdPrefix: '_v-',   // hash前缀：_v-23j232jj
      cssScopedHashType: 'sum',   // hash生成模式，num：使用`hash-sum`, md5: 使用`fis.util.md5`
      cssScopedHashLength: 8,     // hash 长度，cssScopedHashType为md5时有效

      cssScopedFlag: '__vuec__',  // 兼容旧的ccs scoped模式而存在，此例子会将组件中所有的`__vuec__`替换为 `scoped id`，不需要设为空
    })
  ],
});

• 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阶段的主要过程：

1. 解析vue文件，找到其中的style,template,script标签。

2. 每一个style标签创建一个对应的虚拟文件，后缀为lang属性指定，默认css，你可以指定less或其它的后缀。对创建虚拟文件，一样会进行fis3的编译流程（属性lang的值决定该文件怎么编译），并加入当前文件的依赖。

3. template标签的内容为Vue组件的模板，template标签同样有lang属性，默认html，会进行html特性处理，模板的内容最终会输出到module.exports.template中。

4. script标签为文件最后输出的内容(加入模板字符串)，支持lang属性。

组件编写规范

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

css scoped支持

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

• 在style标签中使用scoped标志。

  <style scoped></style>
  <style lang="scss" scoped></style>

• scoped标志会根据文件路径生成唯一的hash字符串（如：_v-23j232jj ）

测试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')
  ]
})