Gulu 开源项目教程

Gulu 开源项目教程

gulu轱辘，面向源码阅读者的 UI 框架项目地址:https://gitcode.com/gh_mirrors/gu/gulu

1. 项目的目录结构及介绍

gulu/
├── dist/
│   ├── css/
│   │   └── gulu.css
│   └── js/
│       └── gulu.js
├── src/
│   ├── css/
│   │   └── gulu.css
│   └── js/
│       └── gulu.js
├── test/
│   ├── css/
│   │   └── gulu.css
│   └── js/
│       └── gulu.js
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

• dist/: 存放编译后的文件，包括 CSS 和 JS 文件。
• src/: 存放源代码文件，包括 CSS 和 JS 文件。
• test/: 存放测试文件，包括 CSS 和 JS 文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的 scripts 部分。以下是常见的启动命令：

{
  "scripts": {
    "start": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js",
    "test": "jest"
  }
}

• start: 启动开发服务器，用于开发调试。
• build: 编译项目，生成生产环境的代码。
• test: 运行测试脚本。

3. 项目的配置文件介绍

3.1 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/js/gulu.js',
  output: {
    filename: 'gulu.js',
    path: path.resolve(__dirname, 'dist/js')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

• entry: 指定入口文件。
• output: 指定输出文件的路径和文件名。
• module: 配置模块加载规则，例如 CSS 文件的处理。
• devServer: 配置开发服务器，指定内容根目录和端口。

3.2 package.json

{
  "name": "gulu",
  "version": "1.0.0",
  "description": "A simple UI library",
  "main": "dist/js/gulu.js",
  "scripts": {
    "start": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js",
    "test": "jest"
  },
  "dependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "jest": "^26.0.0",
    "style-loader": "^2.0.0",
    "css-loader": "^5.0.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 主入口文件。
• scripts: 定义项目的脚本命令。
• dependencies: 项目依赖的包。
• devDependencies: 开发环境依赖的包。

gulu轱辘，面向源码阅读者的 UI 框架项目地址:https://gitcode.com/gh_mirrors/gu/gulu