Preact基础配置

采用Preact框架可实现原生JS环境下的JSX语法支持。该框架以轻量化著称，具备React API兼容性，适用于需要JSX特性的项目。

依赖管理

• Preact: 提供JSX编译支持
• Babel: JSX语法转译工具
• Webpack: 模块打包解决方案

项目初始化

npm init -y
npm install preact
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server

目录结构

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── index.js
│   └── App.js
├── .babelrc
├── webpack.config.js
├── package.json
└── README.md

Babel配置

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
      "pragma": "h",
      "pragmaFrag": "Fragment"
    }]
  ]
}

Webpack配置

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
        ],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 9000,
        client: {
            overlay: {
                errors: true,
                warnings: false,
            },
        },
    },
};

核心组件实现

// src/index.js
import { h, render } from 'preact';
import App from './App';

render(<App />, document.getElementById('root'));

// src/App.js
import { h } from 'preact';
import About from './components/About';

export default function App() {
  return (
    <div>
      <h1>欢迎使用Preact</h1>
      <p>这是基础应用示例</p>
      <About />
    </div>
  );
}

页面组件开发

// src/components/About.js
import { h } from 'preact';

export default function About() {
  return (
    <section>
      <h2>关于我们</h2>
      <p>我们是一家优秀的公司</p>
    </section>
  );
}

路由实现方案

路由库安装

npm install preact-router

页面组件创建

// src/pages/Home.js
import { h } from 'preact';

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <p>欢迎访问主页</p>
    </div>
  );
}

// src/pages/About.js
import { h } from 'preact';

export default function About() {
  return (
    <div>
      <h1>关于页面</h1>
      <p>了解更多公司信息</p>
    </div>
  );
}

路由配置

// src/App.js
import { h } from 'preact';
import { Router, Route } from 'preact-router';
import Home from './pages/Home';
import About from './pages/About';

export default function App() {
  return (
    <div>
      <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
      </nav>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </div>
  );
}

运行与构建

npx webpack serve --mode development
npx webpack --mode production

高级配置

resolve: {
  alias: {
    react: 'preact/compat',
    'react-dom': 'preact/compat'
  }
}

导航实现

• navigate()函数调用
• useRouter()钩子使用
• History API直接操作