Preact-MDL 项目教程
1、项目的目录结构及介绍
Preact-MDL 项目的目录结构如下:
preact-mdl/
├── src/
│ ├── components/
│ ├── index.js
├── test/
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── docs.md
├── karma.conf.js
├── package.json
├── rollup.config.js
目录介绍:
src/
: 包含项目的主要源代码,其中components/
目录存放各个组件的实现,index.js
是项目的入口文件。test/
: 包含项目的测试文件。.editorconfig
: 编辑器配置文件。.eslintignore
: ESLint 忽略配置文件。.eslintrc
: ESLint 配置文件。.gitignore
: Git 忽略配置文件。.npmignore
: npm 忽略配置文件。.travis.yml
: Travis CI 配置文件。LICENSE
: 项目许可证文件。README.md
: 项目说明文档。docs.md
: 项目文档文件。karma.conf.js
: Karma 测试配置文件。package.json
: 项目依赖和脚本配置文件。rollup.config.js
: Rollup 打包配置文件。
2、项目的启动文件介绍
项目的启动文件是 src/index.js
,它是整个应用的入口点。该文件通常会导入并初始化主要的组件和功能。
// src/index.js
import { h, render } from 'preact';
import App from './components/App';
render(<App />, document.getElementById('root'));
启动文件介绍:
- 导入
preact
库的核心功能。 - 导入主应用组件
App
。 - 使用
render
方法将App
组件渲染到 DOM 中的root
元素。
3、项目的配置文件介绍
package.json
package.json
文件包含了项目的元数据和依赖信息,以及一些脚本命令。
{
"name": "preact-mdl",
"version": "1.0.0",
"description": "A collection of Preact Components that encapsulate Google's Material Design Lite",
"main": "src/index.js",
"scripts": {
"start": "rollup -c rollup.config.js -w",
"build": "rollup -c rollup.config.js",
"test": "karma start karma.conf.js"
},
"dependencies": {
"preact": "^10.5.12",
"material-design-lite": "^1.3.0"
},
"devDependencies": {
"rollup": "^2.3.4",
"karma": "^6.3.4"
}
}
rollup.config.js
rollup.config.js
文件是 Rollup 的配置文件,用于打包项目。
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'App'
},
plugins: [
resolve(),
commonjs()
]
};
karma.conf.js
karma.conf.js
文件是 Karma 的配置文件,用于运行测试。
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
files: [
'test/**/*.spec.js'
],
preprocessors: {
'test/**/*.spec.js': ['rollup']
},
rollupPreprocessor: {
plugins: [
require('rollup-plugin-node-resolve')(),
require('rollup-plugin-commonjs')()
],
output: {
format: '