GithubHelp home page GithubHelp logo

components's Introduction

FIS 组件生态 Build Status

建议直接使用 npm + fis3-hook-node_modoules ,目前已基本稳定。

Demo

fis3 已经原生支持使用npm的node_modules来管理模块,快使用node_modules

背景

目前互联网上已经存在大量成型的第三方组件,我们为什么不直接在fis中使用呢?虽然各类插件规范可能不一致,FIS-Components帮你统一规范,简单化使用方式!

像开发 node.js 一样开发网页应用

fis install 类似与 npm install,把现有的组件安装到当前项目。

$ fis install jquery bootstrap

Installed
├── github:fis-components/[email protected]
└── github:fis-components/[email protected]

无需任何配置直接就能这样使用。

require('bootstrap/button');
var $ = require('jquery');


$('.btn').click(function() {
    alert('Magic');
});

还记得 fis 的三种语言能力吗?同样直接可以用这种路径。{组件名字}/{资源在组件中的路径}

为什么不直接使用 bower?

个人觉得有以下几个原因,导致 bower 不适合 fis。

  1. bower 包没有严格的存放规范,每个包的引用方式都可能不一样。冗余的文件多,影响编译性能。于是,我们制定了更严格的规范, 同时我们把不必要的文件去掉了。
  2. 大部分组件采用 amd/umd 规范,在 fis 的 mod.js 中不能直接使用。于是,我们的组件平台集成了转换工具,自动将 amd/umd 转成 commonJS。
  3. 有的组件我们希望是私有的,部门级别的共享,bower做不到。于是,我们的组件安装可以指定多种平台,可以直接安装来自 github、gitlab 或者 lights 上的组件。
  4. fis 开发中还有一些特有的东西,比如可公用的 smarty、velocity 模板,放在共有平台没意义。

为什么选择 commonJs 规范?

目前比较流行组件规范有 AMD 、CommonJs 和 UMD 三种(什么是 amd commonjs umd?), AMD 和 UMD 居多,而我们的选择是最简单的 CommonJs 规范与 node.js 采用的保持一致。

AMD 和 UMD 扩展自 CommonJs 规范,主要为了适用于浏览器。 而在 fis 的开发环境中,我们直接就能使用 CommonJs 规范。而且目前已被 mod.js 方案采用,广泛应用于厂内各大产品。

如何同步现有流行组件?

现状:大量现有第三方组件采用的要不是 AMD,要不就是 UMD,而我们选择的是 CommonJs 规范,如何去适配现有的这次组件?

通过简单的配置,结合 travis CI, 代码一提交就会自动把现有 AMD 或者 UMD 的组件转换成 CommonJs。

目前此机构下面的组件都来源于这些配置文件, 欢迎大家提 pull request 丰富我们的组件平台。

如果是 npm 组件想同步过来,只需要修改 task.yml 文件即可,把需要同步的组件填写入。CI 会自动转换。

sync:
  npm:
    # 当不指定版本时,默认同步最新的3个版本。
    # 当版本为 latest 时只会同步最新的那个版本。
    # 可以同时处理多个组件。如:
    # - whatwg-fetch
    # - [email protected]
    - whatwg-fetch@latest

支持强大的 semverion

当我们使用某个第三组件时,我们希望使用的是一个比较稳定的版本,对方大的版本更新不希望更新到,同时如果有什么小瑕疵,希望又能及时更新到。如何设置?

目前第三方库都有这么个约定,小问题修复都是发布新的小版本号,大的改动会发布大的版本号。我们只需要设置大版本号下最新的小版本就能满足这个需求。

比如:

  • jquery@~1.9.2 将会安装 >=1.9.2 && <1.10.0 中的最新一个版本。
  • jquery@^1.9.2 将会安装 >=1.9.2 && <2.0.0 中的最新一个版本。

详情

components's People

Contributors

2betop avatar 404pnf avatar andycall avatar ascoders avatar atian25 avatar belinchung avatar codering avatar cos800 avatar dblate avatar fancyboynet avatar g8up avatar ginhing avatar gloriagxx avatar hefangshi avatar jinx151 avatar lienjun avatar oxund avatar shiye515 avatar toniol avatar worry127722 avatar yueyao avatar zhangjunah avatar zhangtao07 avatar zhrren avatar zoomlyly avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

components's Issues

关于私有组件库的建立

@atian25 我想问一下,我们公司有私有的gitlab平台,主要是代码管理,如果我想在上面搭建fis 的公共组件库,我该如何搭建呢?能否给一个流程啊~ 万分感谢!!

uikit出错了~ Uncaught TypeError: Cannot read property 'apply' of undefined

我是这样子使用的:

fis install jquery
fis install uikit
……
下载我需要的组件库。
会下载到根目录下的 components 里。

然后下载 mod.jslib 目录。

然后安装 autoload 插件。npm install -g fis-postpackager-autoload

然后创建 fis-conf.js 内容如下:

fis.config.merge({
    modules : {
        postprocessor : {
            js : 'jswrapper'
        },
        postpackager : 'autoload'
    },
    settings : {
        postprocessor : {
            jswrapper : {
                type : 'amd'
            }
        }
    }
});

fis.config.merge({
    roadmap : {
        path : [
            {
                //一级同名组件,可以引用短路径,比如modules/jquery/juqery.js
                //直接引用为var $ = require('jquery');
                reg : /^\/components\/([^\/]+)\/\1\.(js)$/i,
                //是组件化的,会被jswrapper包装
                isMod : true,
                //id为文件夹名
                id : '$1'
            },
            {
                //modules目录下的其他文件
                reg : /^\/components\/(.*)\.(js)$/i,
                //是组件化的,会被jswrapper包装
                isMod : true,
                //id是去掉modules和.js后缀中间的部分
                id : '$1'
            }
        ]
    }
});

然后 index.html 内容如下:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="components/uikit/css/uikit.gradient.css"/>
    <script src="lib/mod.js"></script>
</head>
<body>
    <a class="uk-button" href="">按钮一</a>
    <button class="uk-button" type="button">按钮二</button>
    <button class="uk-button" type="button" disabled>按钮三</button>

<script>
    require('uikit');
</script>
</body>
</html>

然后:fis release -wL

是这样子用吗?关于模块化 看官网的文档 有点稀里糊涂的。

出现的错误是这样子的:
2015-02-09_105501

require('antd')报错,require其他的都正常

fis release的时候

[NOTIC] can't find dep resource [react]

 [NOTIC] can't find dep resource [./affix]

 [NOTIC] can't find dep resource [./datepicker]

 [NOTIC] can't find dep resource [./tooltip]

 [NOTIC] can't find dep resource [./carousel]

 [NOTIC] can't find dep resource [./tabs]

 [NOTIC] can't find dep resource [./modal]

 [NOTIC] can't find dep resource [./dropdown]

 [NOTIC] can't find dep resource [./progress]

 [NOTIC] can't find dep resource [./popover]

 [NOTIC] can't find dep resource [./select]

 [NOTIC] can't find dep resource [./breadcrumb]

 [NOTIC] can't find dep resource [./popconfirm]

 [NOTIC] can't find dep resource [./pagination]

 [NOTIC] can't find dep resource [./steps]

 [NOTIC] can't find dep resource [./input-number]

 [NOTIC] can't find dep resource [./switch]

 [NOTIC] can't find dep resource [./checkbox]

 [NOTIC] can't find dep resource [./table]

 [NOTIC] can't find dep resource [./tag]

 [NOTIC] can't find dep resource [./collapse]

 [NOTIC] can't find dep resource [./message]

 [NOTIC] can't find dep resource [./slider]

 [NOTIC] can't find dep resource [./queue-anim]

 [NOTIC] can't find dep resource [./radio]

 [NOTIC] can't find dep resource [./notification]

 [NOTIC] can't find dep resource [./alert]

 [NOTIC] can't find dep resource [./validation]

 [NOTIC] can't find dep resource [./tree]

 [NOTIC] can't find dep resource [./upload]

 [NOTIC] can't find dep resource [./badge]

 [NOTIC] can't find dep resource [./menu]

 [NOTIC] can't find dep resource [./timeline]

 [NOTIC] can't find dep resource [./button]

 [NOTIC] can't find dep resource [./icon]

 [NOTIC] can't find dep resource [./row]

 [NOTIC] can't find dep resource [./col]

 [NOTIC] can't find dep resource [./spin]

 [NOTIC] can't find dep resource [./form]

 [NOTIC] can't find dep resource [./input]

 [NOTIC] can't find dep resource [./calendar]

 [NOTIC] can't find dep resource [./timepicker]

 [NOTIC] can't find dep resource [react]

 [NOTIC] can't find dep resource [./affix]

 [NOTIC] can't find dep resource [./datepicker]

 [NOTIC] can't find dep resource [./tooltip]

 [NOTIC] can't find dep resource [./carousel]

 [NOTIC] can't find dep resource [./tabs]

 [NOTIC] can't find dep resource [./modal]

 [NOTIC] can't find dep resource [./dropdown]

 [NOTIC] can't find dep resource [./progress]

 [NOTIC] can't find dep resource [./popover]

 [NOTIC] can't find dep resource [./select]

 [NOTIC] can't find dep resource [./breadcrumb]

 [NOTIC] can't find dep resource [./popconfirm]

 [NOTIC] can't find dep resource [./pagination]

 [NOTIC] can't find dep resource [./steps]

 [NOTIC] can't find dep resource [./input-number]

 [NOTIC] can't find dep resource [./switch]

 [NOTIC] can't find dep resource [./checkbox]

 [NOTIC] can't find dep resource [./table]

 [NOTIC] can't find dep resource [./tag]

 [NOTIC] can't find dep resource [./collapse]

 [NOTIC] can't find dep resource [./message]

 [NOTIC] can't find dep resource [./slider]

 [NOTIC] can't find dep resource [./queue-anim]

 [NOTIC] can't find dep resource [./radio]

 [NOTIC] can't find dep resource [./notification]

 [NOTIC] can't find dep resource [./alert]

 [NOTIC] can't find dep resource [./validation]

 [NOTIC] can't find dep resource [./tree]

 [NOTIC] can't find dep resource [./upload]

 [NOTIC] can't find dep resource [./badge]

 [NOTIC] can't find dep resource [./menu]

 [NOTIC] can't find dep resource [./timeline]

 [NOTIC] can't find dep resource [./button]

 [NOTIC] can't find dep resource [./icon]

 [NOTIC] can't find dep resource [./row]

 [NOTIC] can't find dep resource [./col]

 [NOTIC] can't find dep resource [./spin]

 [NOTIC] can't find dep resource [./form]

 [NOTIC] can't find dep resource [./input]

 [NOTIC] can't find dep resource [./calendar]

 [NOTIC] can't find dep resource [./timepicker]

require('redux'),require('jquery')这些都没问题

好像是antd/lib/index.js中require('./affix')这些,目录中他想要找到到的是/affix/index.js,fis应该是去找了affix.js。
不过就算我改变了antd/lib/index.js中require('/affix/index'),还是会引起一些别的问题

关于组件删除的问题?

如题,我看了文档发现只有 install 组件,没有 uninstall 组件,如果我要删除某个组件应该怎么办,是只能手动删除吗?
谢谢!

无法安装antd

analyzing dependencies \ Load versions of rc-util from mirror failed.
Fallback to github.
analyzing dependencies - Load [email protected] component.json from mirror failed.
Fallback to github.
analyzing dependencies \ 
....

一直failed

require('react-slick') 这种库的时候,由于 fis3-hook-component 插件的问题,会失败

react-slick 库的结构是这样的

image

component.json 里面是这样定义的

image

在 fis3-hook-components 里,查找文件代码是这样的

    if (subpath) {
      resolved = findResource('/' + componentsDir+ cName + '/' + subpath, file ? file.dirname : fis.project.getProjectPath());
    } else {
      resolved = findResource('/' + componentsDir + cName + '/' + (config.main || 'index'), file ? file.dirname : fis.project.getProjectPath());

      if (!resolved.file) {
        resolved = findResource('/' + componentsDir + cName + '/' + cName, file ? file.dirname : fis.project.getProjectPath());
      }
    }

对于 react-slick 来说,能命中的文件路径为

/component/react-slick/./lib
或者
/component/react-slick/react-slick

没有办法命中正确的路径

/component/react-slick/.lib/index

如果按照 commonjs 规范,应该是可以命中的

是不是考虑在 fis3-hook-component 中实现,或者修改 react-slick 的 main 属性

为什么无 requirejs 或其它模块加载器的 components 呢?

我对 fis-components 的理解是类似于 bower,用来管理第三方库,但是它比 bower 更加规范,更加适合 fis

但是搜索了下组件列表,并没有找到 requirejs 或其它模块加载器,是 fis-components 不建议将这些模块加载器作为 components 给添加进来嘛?

fis3 install 出现404

$ fis3 install

 [INFO] Currently running fis3 (C:\work\nodejs\npm-global\node_modules\fis3\)

 [ERROR] Error: <!DOCTYPE html>
<html>
<head>
  <title>The page you were looking for doesn't exist (404)</title>
  <link href="/static.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>404</h1>
  <h3>The page you were looking for doesn't exist.</h3>
  <hr/>
  <p>You may have mistyped the address or the page may have moved.</p>
</body>
</html>
 while loading gitlab:http://git.anything.com/just7039/jquery-autocomplete

我是将 https://github.com/fis-components/jquery-autocomplete 导入到公司内网的gitlab, http://git.anything.com/just7039/jquery-autocomplete 在浏览器是可访问的。

fis-conf.js

fis.config.set('component.gitlab', {
    author: 'just7039',
    domain: 'http://git.anything.com/',
    token: 'evv1PgwcrL6qN8ktysRw'
});

component.json

{
    "protocol": "gitlab",
    "dependencies": [
        "jquery-autocomplete"
    ]
}

components 的多版本共存

因为所有依赖都会被打平安装在 components 目录下面,没有层级关系,如果出现同一组件被指定不同的版本将会出现冲突,目前的处理方案非常简单,没有做版本对比采用版本较高的版本,而是采用先入为主的原则处理。

如果项目中存在某些页面要用 [email protected] 某些页面需要用 [email protected] 时候如何做多版本共存?

`animate.css` is not a valid repository

fis3 install animate.css
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)

 [WARNI] `animate.css` is not a valid repository.
Already installed

使用components遇到问题,页面报错:没有require定义

我的使用方式如下。

目录结构

├── components
│   └── zepto
│       ├── README.md
│       ├── ajax.js
│       ├── assets.js
│       ├── callbacks.js
│       ├── component.json
│       ├── data.js
│       ├── deferred.js
│       ├── detect.js
│       ├── event.js
│       ├── form.js
│       ├── fx.js
│       ├── fx_methods.js
│       ├── gesture.js
│       ├── ie.js
│       ├── ios3.js
│       ├── main.js
│       ├── selector.js
│       ├── stack.js
│       ├── touch.js
│       └── zepto.js
├── fis-conf.js
└── src
    ├── html
    │   └── helloworld.html
    ├── scripts
    │   ├── biz
    │   │   └── helloworld
    │   │       └── helloworld.js
    │   └── common
    │       └── common.js
    └── styles

helloworld.html中的内容为:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="../scripts/common/common.js"></script>
<script src="../scripts/biz/helloworld/helloworld.js"></script>
</body>
</html>

common.js中的内容为:

require("zepto");

helloworld.js中的内容为:

console.log("hello world")

运行fis server start; fis release;之后,打开:http://127.0.0.1:8080/src/html/helloworld.html,报错

image

请问是不是我用的方式有问题?

安装私有库失败

node v0.12.2
fis3 v3.0.13
fis3 install github:rain-team/base
 [INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3)
analyzing dependencies - 
 [WARNI] `fis install` now is for installing commponents, you may use `lights install` instead.

 [ERROR] `github:rain-team/base` not found.
{
    "version": "1.2.0",
    "repos": "https://github.com/rain-team/base.git",
    "name": "base",
    "main": "base.js",
    "github": {
      "author": "rain-team"
    }
}

https://github.com/rain-team/base/

我又来了 UIkit还是不行~ require 返回空Object {}

代码是这样的:

    require(['jquery', 'uikit'], function ($, UIkit) {
        console.log($);
        console.log(UIkit);
    });

Console输出是:

function (selector, context) {
            // The jQuery object is actually just the init constructor 'enhanced'
            // Need init if jQuery is called (just allow error to be thrown if not included)
            return new jQuery.fn.init(selector, context);
        } (index):51
Object {}

jQuery 正常,UIkit 不行。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.