Preact-MDL 项目教程

2 0 0

Preact-MDL 项目教程

preact-mdl:boom: A collection of Preact Components that encapsulate Google’s Material Design Lite.项目地址:https://gitcode.com/gh_mirrors/pr/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: '

preact-mdl:boom: A collection of Preact Components that encapsulate Google’s Material Design Lite.项目地址:https://gitcode.com/gh_mirrors/pr/preact-mdl

# 随笔