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 项目的教程,包含了项目的目录结构、启动文件和配置文件的详细介绍。希望对你有所帮助!