手动搭建React项目脚手架(二)

代码地址

手动搭建React项目脚手架(一)已经打包成功，接下开始写代码

修改index.js文件

import React from "react";
import { render } from "react-dom";

render(<div>my-frame根视图</div>, document.getElementById("root"));

执行 npm run build报错

1.ES6兼容

通常我们需要把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码，这包含2件事：

1 把新的 ES6 语法用 ES5 实现，例如 ES6 的 class 语法用 ES5 的 prototype 实现，需要用到：@babel/preset-env。
2 给新的 API 注入 polyfill ，例如项目使用 fetch API 时，只有注入对应的 polyfill 后，才能在低版本浏览器中正常运行，需要用到： @babel/polyfill 。

2.Babel

Babel 是一个JavaScript 编译器

Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript。以下是Babel可以为您做的主要事情：

1 转换语法
2 目标环境中缺少Polyfill功能（通过@ babel / polyfill）
3 源代码转换（codemods）

执行

npm install  babel-loader   @babel/core  @babel/preset-env  --save  -D

修改 webpack.config.js文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "index.bundle.js",
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: "my-frame",
			filename: "./index.html", //filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构
			template: "./src/pages/document.ejs",
			templateParameters: {
				context: { config: { publicPath: "/public/" } },
			},
			inject: true, //注入选项 script标签位于html文件的 body 底部
			hash: true, //给生成的 js 文件一个独特的 hash 值
		}),
	],
	//定义多个规则来匹配对应的模块，然后给对应的模块应用指定的loader
	//重置顺序：一组 Loader 的执行顺序默认是从右到左执行，通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后
	module: {
		rules: [
			{
				test: /\.js$/, // 注意test的值不是一个字符串，而是一个正则
				exclude: /(node_modules|bower_components)/, // 排除这两个文件不需要打包
				// 使用babel-loader编译js代码
				use: [
					{
						loader: "babel-loader",
						options: {
							presets: ["@babel/preset-env"],
						},
					},
				],
			},
		],
	},
};

执行 npm run build

错误原因：缺少插件：@babel/preset-react

 1 安装插件

npm i @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-class-properties -D

2 在根目录创建.babelrc文件

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

再执行npm run build打包成功。

在浏览器打开打包好的index.html正常显示。下一篇手动搭建React项目脚手架(三)

推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩