在普通页面中使用React JSX时babel6、babel7的配置与选择

最新推荐文章于 2023-03-13 23:48:21 发布

星野睡不醒

最新推荐文章于 2023-03-13 23:48:21 发布

阅读量994

点赞数 1

分类专栏： Web 文章标签： react babel js es6 jsx

本文链接：https://blog.csdn.net/qq_21567385/article/details/108807052

版权

Web 专栏收录该内容

150 篇文章 33 订阅

订阅专栏

前言

在一些旧项目中，往往是抹水泥，需要东拼西补，于是需要 react 或者 vue 的浏览器版本，vue 相信大家都很熟悉了，这里以 react 为例探讨。

react 便捷的 jsx 语法可以极大提高生产效率，但其需要编译，是一个很严峻的问题。

babel 7

babel 7 出现后，所有下属包均归类到 @babel/*** 命名域下，相应的也有一些整合和变化，这是令人比较苦恼的。

而在 React 官方文档中，对 JSX 的 babel 编译却是使用的 babel 6 版本：

	npm install babel-cli@6 babel-preset-react-app@3

究竟如何是好，需要探究一下。

babel 6 编译 JSX

先使用官方推荐方法，安装 babel 6 与 react 的 babel 预设 babel-preset-react-app ：

	yarn add -D babel-cli@6 babel-preset-react-app@3

准备一段点击按钮会加一的简单 react 函数组件 src/index.jsx ：

const App = () => {
  const [state, setstate] = React.useState(1);

  const plus = React.useCallback(() => {
    setstate((pre) => pre + 1);
  }, []);

  return (
    <div>
      当前值：{state}
      <button onClick={plus}>点击加一</button>
    </div>
  );
};

ReactDOM.render(<App></App>, document.getElementById("app"));

编译

	yarn babel src --out-dir dist --presets react-app/prod

结果

可以看到 es6 的箭头函数被编译了，同时添加了 es6 方法的实现，JSX 也被编译了。

校验

准备 index.html 校验：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
  </script>
</head>

<body>

    <div id='app'></div>
    
    <script src="./dist/index.js"></script>
</body>

</html>

成功渲染，校验通过：

babel 7 编译 JSX

babel 7 的使用较复杂，如果你还不会使用 babel 7 ，可以学习以下文章：

《 babel7.4 之后 babel/polyfill 是否继续使用和怎么用的问题》

依赖

	yarn add -D @babel/core @babel/cli @babel/preset-env
	yarn add @babel/polyfill core-js

安装好依赖我们不得不提出质疑：@babel/preset-env 是 babel 默认的推荐预设，对 react JSX 是否支持？经测试，不支持，需要追加 react 预设 @babel/preset-react ：

	yarn add -D @babel/preset-react

配置

配置 babel 的配置文件 babel.config.json ：

{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true }
      }
    ],
    ["@babel/preset-react"]
  ]
}

编译

	yarn babel src --out-dir dist

结果

痛心的是 @babel/polyfill 污染了全局环境，模拟了一个完整的 es2015+ 的环境。

污染全局环境先不论，含有 require 的代码是不能在普通页面中使用的，需要 webpack 配合打包。

如果你对 babel 7 + webpack 一无所知，可以学习以下文章：

《 webpack4 + babel7 项目基础配置（构建工具库或功能性库）》

webpack 打包

安装 webpack 与 babel-loader ：

	yarn add -D webpack webpack-cli babel-loader

配置 webpack.config.js ：

const path = require("path")

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  entry: resolve('src/index.jsx'),
  output: {
    path: resolve('dist'),
    filename: "out.js"
  },
  module: {
    rules: [
    {
      test: /\.js(x)?$/,
      loader: 'babel-loader',
      include: resolve('src'),
      exclude: /node_modules/
    }]
  }
}

打包：

	webpack --mode production

结果：

如此一来就可以使用了，打包之后的文件有 13 kb ，很明显，做过了摇树，之前我们担忧的污染问题不存在了！（完整的环境有 120 kb 以上）

总结

无论 webpack 打包之后膨胀了几倍，其优秀的兼容性是毋庸置疑的。

但从易用性角度来看，使用 babel 6 似乎是一个很快捷、易用的选择。

其他

React babel 7 预设：@babel/preset-react
转换 JSX 的核心：@babel/plugin-transform-react-jsx-compat （在预设中已包括）
官方文档 babel 6 编译说明：在网站中添加 React

星野睡不醒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在普通页面中使用React JSX时babel6、babel7的配置与选择

前言在一些旧项目中，往往是抹水泥，需要东拼西补，于是需要 react 或者 vue 的浏览器版本，vue 相信大家都很熟悉了，这里以 react 为例探讨。react 便捷的 jsx 语法可以极大提高生产效率，但其需要编译，是一个很严峻的问题。babel 7babel 7 出现后，所有下属包均归类到 @babel/*** 命名域下，相应的也有一些整合和变化，这是令人比较苦恼的。而在 React 官方文档中，对 JSX 的 babel 编译却是使用的 babel 6 版本： npm install
复制链接

扫一扫