BEM ClassNames 项目教程

BEM ClassNames 项目教程

bem-classnamesA simple utility to manage BEM class names on React项目地址:https://gitcode.com/gh_mirrors/be/bem-classnames

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

bem-classnames/
├── dist/
│   ├── index.d.ts
│   ├── index.js
│   └── index.js.map
├── src/
│   ├── index.ts
│   └── utils.ts
├── .gitignore
├── .npmignore
├── package.json
├── README.md
├── tsconfig.json
└── webpack.config.js

• dist/: 编译后的文件目录，包含 TypeScript 声明文件、JavaScript 文件和源映射文件。
• src/: 源代码目录，包含项目的主要 TypeScript 文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 编译配置。
• webpack.config.js: Webpack 打包配置。

2. 项目的启动文件介绍

项目的入口文件是 src/index.ts，它导出了 BEM 类名生成函数。这个文件是整个项目的关键，负责处理 BEM 类名的生成逻辑。

// src/index.ts
import { bemClassName } from './utils';

export default bemClassName;

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的基本信息、依赖和脚本命令。

{
  "name": "bem-classnames",
  "version": "1.0.0",
  "description": "A simple utility for generating BEM class names.",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "webpack",
    "prepublishOnly": "npm run build"
  },
  "keywords": [
    "bem",
    "classnames",
    "utility"
  ],
  "author": "pocotan001",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^4.0.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的编译配置文件，定义了 TypeScript 编译的选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

webpack.config.js

webpack.config.js 文件是 Webpack 的打包配置文件，定义了如何打包项目。

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    globalObject: 'this'
  }
};

以上是 BEM ClassNames 项目的教程，包含了项目的目录结构、启动文件和配置文件的详细介绍。希望对你有所帮助！

bem-classnamesA simple utility to manage BEM class names on React项目地址:https://gitcode.com/gh_mirrors/be/bem-classnames