v1.0.0

Author: ccqgithub

Diff for: .eslintrc

@@ -0,0 +1,23 @@
+{
+  "globals": {
+
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+        "jsx": true
+    }
+  },
+  "rules": {
+    "strict": [0],
+    "quotes": [0],
+    "generator-star-spacing": [0]
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "commonjs": true,
+    "es6": true
+  }
+}

Diff for: .htmlhintrc

@@ -0,0 +1,12 @@
+{
+  "tagname-lowercase": false,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "doctype-first": true,
+  "tag-pair": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "attr-no-duplication": true,
+  "title-require": true
+}

Diff for: README.md

@@ -1,3 +1,42 @@
 # fis3-parser-vue-component
 
-> 未完成
+> [FIS3](http://fis.baidu.com/) parser 阶段插件，用于在fis3中编译[Vue](http://vuejs.org.cn/)组件。
+
+## 原理
+
+参考[vue-loader](https://github.com/vuejs/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`属性，如果是coffe等非js文件，请在`fis-conf.js`中配置。
+
+# 组件编写规范
+
+`style`标签可以有多个，`template`和`script`标签只能有一个，具体请参考[vue 单文件组件](http://vuejs.org.cn/guide/application.html)。
+
+## 安装配置
+
+安装：`npm install fis3-parser-vue-component --save-dev`。
+
+配置：
+```javascript:;
+// vue
+fis.match('src/**.vue', {
+  isMod: true,
+  rExt: 'js',
+  useSameNameRequire: true,
+  parser: [
+    fis.plugin('vue-component', {
+        // 暂时还没有自定义配置哦
+    }),
+    fis.plugin('babel-6.x', {
+      presets: ['es2015-loose', 'react', 'stage-3']
+    }),
+    fis.plugin('translate-es3ify', null, 'append')
+  ]
+});
+```

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "fis3-parser-vue-component",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "A parser plugin for fis3 to parser vue component.",
   "keywords": [
     "fis3",

Diff for: test/fis-conf.js

@@ -10,36 +10,63 @@ fis.set('project.ignore', fis.get('project.ignore').concat(['output/**', 'DS_sto
 // https://github.com/fex-team/fis3-hook-commonjs (forwardDeclaration: true)
 fis.hook('commonjs', {
   extList: [
-    '.js', '.coffee', '.es6', '.jsx',
+    '.js', '.coffee', '.es6', '.jsx', '.vue',
   ],
   umd2commonjs: true,
   ignoreDependencies: [
 
   ]
 });
 
-// 模块文件，会进行require包装
-fis.match('/{node_modules,src}/**.{js,jsx}', {
-  isMod: true,
-  useSameNameRequire: true,
+// 用 less 解析
+fis.match('*.less', {
+  rExt: 'css',
+  parser: [fis.plugin('less-2.x')],
+  postprocessor: fis.plugin('autoprefixer'),
 });
 
 // vue
 fis.match('src/**.vue', {
+  isMod: true,
   rExt: 'js',
   useSameNameRequire: true,
-  parser: [parserVuePlugin]
+  parser: [
+    parserVuePlugin,
+    fis.plugin('babel-6.x', {
+      presets: ['es2015-loose', 'react', 'stage-3']
+    }),
+    fis.plugin('translate-es3ify', null, 'append')
+  ]
 });
 
-fis.match('**', {
-  release: '$&'
+fis.match('**.js', {
+  isMod: true,
+  rExt: 'js',
+  useSameNameRequire: true
 });
 
-// 用 less 解析
-fis.match('*.less', {
-  rExt: 'css',
-  parser: [fis.plugin('less-2.x')],
-  postprocessor: fis.plugin('autoprefixer'),
+// 模块文件，会进行require包装
+fis.match('/src/**.js', {
+  parser: [
+    fis.plugin('babel-6.x', {
+      presets: ['es2015-loose', 'react', 'stage-3']
+    }),
+    fis.plugin('translate-es3ify', null, 'append')
+  ]
+});
+
+// no modules
+fis.match('/src/js/engine/**.js', {
+  parser: null,
+  isMod: false
+});
+
+fis.match('/src/js/page/**.js', {
+  isMod: false
+});
+
+fis.match('/src/(**)', {
+  release: '$1'
 });
 
 fis.match('::package', {

Diff for: test/output/src/index.js

@@ -8,8 +8,18 @@
   },
   "author": "",
   "license": "ISC",
-  "dependencies": {},
+  "dependencies": {
+    "vue": "^1.0.25"
+  },
   "devDependencies": {
-    "fis3-postpackager-loader": "^1.5.2"
+    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-preset-react": "^6.5.0",
+    "fis-parser-babel-6.x": "^1.0.0",
+    "fis3-hook-commonjs": "^0.1.22",
+    "fis3-hook-node_modules": "^2.2.3",
+    "fis3-parser-less-2.x": "^0.1.4",
+    "fis3-parser-translate-es3ify": "0.0.2",
+    "fis3-postpackager-loader": "^1.5.2",
+    "fis3-postprocessor-autoprefixer": "^1.0.0"
   }
 }

Diff for: test/output/src/index_vue_style_0.less

@@ -1,14 +1,30 @@
 
 <style lang="less">
-.a{}
+.index {
+  p {
+    line-height: 50px;
+    text-align: center;
+    background: rgb(240, 203, 210);
+    border: 1px solid #ddd;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    margin-top: 20px;
+  }
+}
 </style>
 
 <template>
-  <div class="">
-
+  <div class="index">
+    <p>fis3-parser-vue-component demo runing ~</p>
+    <img src="../image/1.jpg" alt="" />
   </div>
 </template>
 
 <script>
-  var a= 1;
+  module.exports = {
+
+  }
 </script>

Diff for: test/package.json

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>fis3-parser-vue-component demo</title>
+</head>
+<body>
+  <div class="app" id="app">
+    <App></App>
+  </div>
+  <script src="../js/engine/mod.js" data-loader></script>
+  <script src="../js/page/index.js"></script>
+</body>
+</html>