Nodejs TJ 推上说的 components 具体项目是什么样子的啊?

Nodejs TJ 推上说的 components 具体项目是什么样子的啊?

看到一条推, 最近 components 这个关键词出现得好频繁… https://twitter.com/tjholowaychuk/status/251106657080315904

88 components already! and > 100 private components in our app

还有这个链接 https://github.com/component/component/wiki/Components

求介绍…


7 回复

从TJ Holowaychuk的推文中可以看出，他提到了一个名为“components”的项目。这个项目实际上是用于前端模块化的工具和库管理器。尽管它可能不再像以前那样活跃，但其理念对后来的前端模块化工具（如npm）产生了重要影响。

为了帮助理解这个概念，我们可以创建一个简单的示例项目来展示如何使用类似于“components”的思想进行模块化开发。

示例项目结构

my-app/
├── components/
│   ├── jquery/
│   │   └── component.json
│   ├── bootstrap/
│   │   └── component.json
├── index.html
└── package.json

package.json 文件

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "*",
    "bootstrap": "*"
  }
}

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <!-- 引入组件 -->
  <script src="/components/jquery/jquery.js"></script>
  <script src="/components/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="/components/bootstrap/css/bootstrap.min.css">
</head>
<body>
  <h1>Hello, Components!</h1>
  <button class="btn btn-primary">Click Me</button>
</body>
</html>

组件文件夹中的 component.json 文件

以 jquery 为例：

{
  "name": "jquery",
  "repo": "components/jquery",
  "main": "jquery.js"
}

解释

  • 项目结构：我们将不同的库放在 components 文件夹中，并通过 component.json 文件描述每个组件的元数据。
  • package.json：我们定义了项目的依赖项，并使用通配符 * 来表示使用最新版本。
  • index.html：我们在 HTML 文件中引入了这些组件的资源文件（JS 和 CSS），以确保它们可以在页面中正确加载和使用。

这种结构和方法虽然现在不如现代的 npm 模块系统那么流行，但它展示了早期前端模块化的思想。通过这种方式，开发者可以更方便地管理和使用第三方库。


客户端的npm？

今天公司要我做这个. 正在学习components中.

刚刚看了一下这个. https://npmjs.org/package/component

Component package manager consuming git repositories

好像是把Git上的repo作为component的源, 然后让前段的JavaScript像Node.js一样调用模块?

刚刚做了一个测试的component组件. https://github.com/meteormatt/components 可以通过下面的命令安装.

component install meteormatt/components

不过都是测试代码, 只是拿来玩而已. 没什么实际的内容.

enter image description here

看到今天终于大概有点看懂了. 那个项目应该叫component. 里面的所有项目叫components. 另外文件夹里的名字也是components. 然后核心的东西是component.json 至于那个repo 我个人感觉是就是个CLI, 类似SeaJS的包管理工具spm. 目前就会这么多. 然后在看web component, 那个专指前端用的component

TJ Holowaychuk 提到的 “components” 可能是指他创建的一个名为 component 的前端模块管理系统。component 允许开发者将一个项目分解为多个独立的组件，每个组件可以包含HTML、CSS、JavaScript以及其他资源。这些组件可以通过 component 工具进行管理，如安装、更新等。

以下是一个简单的 component.json 文件的例子，它定义了一个组件的基础信息和依赖：

{
  "name": "my-component",
  "version": "1.0.0",
  "scripts": {
    "start": "component-build"
  },
  "dependencies": {
    "component/jquery": "*",
    "visionmedia-core": "*"
  }
}

这个文件中定义了一个名为 my-component 的组件，版本号是 1.0.0。它有两个依赖：jquery 和 visionmedia-core。

接着，你可以使用 component 命令行工具来安装这些依赖，并构建你的组件：

$ component install
$ component build

构建完成后，会生成一个 build 目录，里面包含了所有编译好的资源（CSS、JS 等），可以直接在 HTML 中引用。

例如，在 HTML 文件中引用这些资源：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Component</title>
  <link rel="stylesheet" href="build/component.css">
</head>
<body>
  <div id="app"></div>
  <script src="build/component.js"></script>
</body>
</html>

以上就是一个基本的 component 组件项目的结构和使用方法。

回到顶部