Cleave.js 开源项目教程

Cleave.js 开源项目教程

cleaveVue Cleave component is based on cleave.js for Vue项目地址:https://gitcode.com/gh_mirrors/cl/cleave

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

Cleave.js 是一个用于格式化输入文本的开源库。以下是其基本的目录结构：

cleave.js/
├── dist/
│   ├── cleave.js
│   ├── cleave.min.js
│   ├── cleave-react.js
│   └── cleave-react.min.js
├── example/
│   ├── index.html
│   └── src/
├── src/
│   ├── Cleave.js
│   ├── Cleave-React.js
│   └── util/
├── test/
│   ├── Cleave.js
│   └── Cleave-React.js
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录介绍

• dist/: 包含编译后的 JavaScript 文件，包括压缩和未压缩版本。
• example/: 包含示例代码和演示页面。
• src/: 包含源代码文件，包括 Cleave.js 和 Cleave-React.js。
• test/: 包含测试文件。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 许可证文件。
• package.json: npm 包配置文件。
• README.md: 项目说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

Cleave.js 的启动文件主要是 dist/cleave.js 和 dist/cleave-react.js。这两个文件分别是 Cleave.js 的核心库和 React 组件库。

启动文件介绍

• dist/cleave.js: 核心库文件，用于格式化输入文本。
• dist/cleave-react.js: React 组件库文件，用于在 React 项目中使用 Cleave.js。

3. 项目的配置文件介绍

Cleave.js 的配置文件主要包括 package.json 和 webpack.config.js。

配置文件介绍

• package.json: 包含了项目的依赖、脚本和其他元数据。

  {
    "name": "cleave.js",
    "version": "1.6.0",
    "description": "JavaScript library for formatting input text content automatically.",
    "main": "dist/cleave.js",
    "scripts": {
      "build": "webpack",
      "test": "karma start"
    },
    "dependencies": {
      "react": "^16.0.0",
      "react-dom": "^16.0.0"
    },
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-env": "^1.6.0",
      "babel-preset-react": "^6.24.1",
      "eslint": "^4.7.2",
      "webpack": "^3.6.0"
    }
  }
  

• webpack.config.js: Webpack 的配置文件，用于打包和编译 JavaScript 文件。

  const path = require('path');
  
  module.exports = {
    entry: {
      'cleave': './src/Cleave.js',
      'cleave-react': './src/Cleave-React.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
      library: 'Cleave',
      libraryTarget: 'umd'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
  
  

cleaveVue Cleave component is based on cleave.js for Vue项目地址:https://gitcode.com/gh_mirrors/cl/cleave