Mpx 框架快速入门教程

1. 项目目录结构及介绍

当你克隆或下载 didi/mpx 项目后，你会看到以下的基本目录结构：

.
├── docs                    # 文档相关资料
├── example                 # 示例代码
│   ├── legacy              # 兼容模式示例
├── packages                # 项目包含的 npm 包
├── test                    # 测试相关的文件
├── .eslintignore           # ESLint 忽略规则
├── .eslintrc.js            # ESLint 配置文件
├── .gitignore              # Git 忽略规则
├── CODE_OF_CONDUCT.md      # 行为准则
├── LICENSE                 # 许可证文件
├── README.md               # 项目简介
├── SECURITY.md             # 安全相关说明
├── babel.config.json       # Babel 配置
├── jest.config.json        # Jest 测试配置
├── lerna.json               # Lerna 管理配置
├── package.json            # 项目主配置文件
└── webpack.config.js       # Webpack 构建配置

• docs: 存放项目文档和 VuePress 生成的网站资源。
• example: 提供示例代码，帮助理解如何使用 Mpx。
• packages: 项目分解出的独立模块，如 Mpx 运行时核心，编译核心等。
• test: 测试用例，用于验证框架的功能是否正常。
• .eslintignore, .eslintrc.js: ESLint 相关配置，保持代码风格一致性。
• .gitignore: Git 忽略规则，避免不必要的文件提交到版本控制。
• CODE_OF_CONDUCT.md: 社区行为规范，指导社区成员行为。
• LICENSE: 使用的开源许可协议。
• README.md: 项目简介和使用说明。
• SECURITY.md: 有关安全问题的指南。
• babel.config.json: Babel 配置文件，用于 JavaScript 代码转译。
• jest.config.json: Jest 测试配置文件，用于单元测试。
• lerna.json: Lerna 文件，管理多包项目。
• package.json: 主要的项目配置文件，包含了项目依赖、脚本和其他信息。
• webpack.config.js: Webpack 配置，定义了项目的构建流程。

2. 项目的启动文件介绍

Mpx 是一个小程序框架，它的启动并不像传统 Web 应用那样通过 index.html 或服务器上的入口文件。而是通过 Mpx 提供的 CLI（命令行工具）来启动项目，例如编译和预览小程序。

如果你想要运行示例代码，首先确保安装全局的 mpx-cli:

npm install -g @mpxjs/cli

然后在项目根目录下，执行以下命令以启动预览服务：

cd example
mpx serve

这将会启动一个本地服务，你可以扫描 QR 码在模拟器上预览示例小程序。

3. 项目的配置文件介绍

package.json

package.json 文件是整个项目的元数据和配置中心，它定义了项目的名称、版本、依赖以及可执行的脚本等。

{
  "name": "@didi/mpx",
  "version": "2.9.1",
  "description": "Mpx - A Progressive Enhanced Cross-platform Mini Program Framework",
  ...
  "scripts": {
    "build": "lerna run build --stream",
    "publish": "lerna publish --yes",
    "lint": "eslint --ext .ts,.tsx,.js,.jsx src",
    ...
  },
  "dependencies": { ... },
  "devDependencies": { ... }
}

scripts 字段包含了项目常用的脚本，比如 build 用来构建所有包，publish 发布新的版本，而 lint 则用于执行代码风格检查。

webpack.config.js

webpack.config.js 配置文件则定义了项目的打包规则，包括加载器（loaders）、插件（plugins）等，它决定了哪些文件会被转换、如何转换、以及最终被打包成什么样的结构。

例如，Mpx 可能会包含关于如何处理 TypeScript、Vue 单文件组件（.vue）以及其他特定类型文件的规则。

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: { ... }
  },
  module: {
    rules: [
      // CSS 处理规则
      // TypeScript 和 JSX 处理规则
      // 图片资源处理规则
      // ...
    ]
  },
  plugins: [ ... ],
};

这里只是简单展示了一个基本的 Webpack 配置结构，实际的配置可能会更复杂，包含了更多自定义逻辑。

了解了这些基本信息后，你应该对 Mpx 有了初步的认识，接下来就可以深入学习其 API、组件和最佳实践，以便更好地利用这个框架来开发高效的小程序。祝你在使用 Mpx 过程中一切顺利！