前置准备

本系列文章在实现 cpreact 的同时理顺 React 框架的核心内容(JSX/虚拟 DOM/组件/生命周期/diff 算法/setState/PureComponent/HOC/onChange 事件) 项目地址

环境准备

首先安装以下 babel 模块, 其具体作用会在后文 JSX 和 虚拟 DOM 中提及。

扩展延伸: babel 执行机制

"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "v8.0.0-beta.0",

同时 .babelrc 配置如下:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "entry"
      }
    ],
    [
      "@babel/preset-react", {
        "pragma": "cpreact.createElement" // 该参数传向 transform-react-jsx 插件, 是前置的一个核心, 后文有解释为什么使用 cpreact.createElement
      }
    ]
  ]
}

配置好 babel 后, 接着提供两套打包工具的配置方案, 读者可以自行选择。

方案 1: 使用 webpack

webpack 拥有一个活跃的社区, 提供了更为丰富的打包能力。

首先安装以下模块:

"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"

在根目录的 webpack.config.js 配置如下:

const webpack = require('webpack')
const path = require('path')
const rootPath = path.resolve(__dirname)

module.exports = {
  entry: path.resolve(rootPath, 'test', 'index.js'),
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  output: {
    filename: 'cpreact.js',
    path: path.resolve(rootPath, 'dist'),
    libraryTarget: 'umd'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: "babel-loader",
    }]
  },
}

然后在 package.json 里加上如下配置:

"scripts": {
  "start": "webpack-dev-server --open",
},

具体可以参照 0.4.3 版本

方案 2: 使用 parcel

parcel 是一款上手极快的打包工具, 使用其可以快速地进入项目开发的状态。在 package.json 加上如下配置, 具体可以参照 0.1 版本

"scripts": {
  "start": "parcel ./index.html --open -p 8080 --no-cache"
},