Component的基础使用

Component是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想,是将网页所需要的各种资源(脚本、样式表、图片、字体等)编译后,放到同一个目录中(默认是build目录)

1)、

首先,安装Component

 然后,在项目根目录下,新建一个index.html

<!DOCTYPE html>

  <html>
    <head>
      <title>Getting Started with Component</title>
      <link rel="stylesheet" href="build/build.css">
    </head>
    <body>
      <h1>Getting Started with Component</h1>
      <p class="blink">hello world!</p>
      <script src="build/build.js"></script>
    </body>

</html>
上面代码中的build.css和build.js,就是Component所要生成的目标文件
接着,在项目根目录下,新建一个component.json文件,作为项目的配置文件

{

"name": "getting-started-with-component",
 "dependencies": {
   "necolas/normalize.css": "^3.0.0"
  },
 "scripts": ["index.js"],
  "styles": ["index.css"]
}
上面代码中,指定JavaScript脚本和样式表的原始文件是index.js和index.css两个文件,并且样式表依赖normalize模块(不低于3.0.0版本,但不高于4.0版本)。这里需要注意,Component模块的格式是"github用户名/项目名"
最后,运行component build命令编译文件
component build
installed : necolas/normalize.css@3.0.1 in 267ms
build : resolved in 1221ms build : files in 12ms build : build/build.js in 76ms - 1kb build : build/build.css in 80ms - 7kb
在编译的时候,Component自动使用autoprefixer为CSS属性加上浏览器前缀
目前,Component似乎处于停止开发的状态。
posted @ 2020-05-21 08:04  星雨,恒奋斗,过客  阅读(954)  评论(0编辑  收藏  举报