react代码，什么时候需要配合babel进行编译？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在react代码中，经常需要引入一个babel的角色。但是，事实上，都是为了引入更高级的语法才会需要babel的。对于react来说，babel并不是必须的，但是大多数情况下，都是需要的。因为在代码编程的过程中，使用一些高级语法是非常必要的。

本文测试环境：win10，chrome@89.0.4389.90，react@16，create-react-app@4.0.3,。

前端实时编译

这种实时编译，并不是react所推荐的。因为这样的话，效率并不是很高。一般来说，需要使用babel的情况，就是使用了高级jsx语法的时候。比如：

需要babel的情况：

<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('app')
    );
</script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>

因为使用了jsx语法，所以需要要对对应的script标签标记type是text/babel。

return (
  <button onClick={() => this.setState({ liked: false })}>
    Like
  </button>
);

不需要babel的情况：

return React.createElement(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

后端预编译

后端预编译的情况，在前端代码中，是看不到script便签里面使用type="text/babel"的，同时，页面代码中也不会直接显示对babel.js的引用。

但是由于这种预编译工具很多，比如webpack、gulp等等，配置上也会有所不同。以默认的脚手架工具create-react-app为例，存在于webpack.config.js文件里面的babel-loader：

提示：这个配置是经过eject操作后，才能看到的。

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    presets: [
      [
        require.resolve('babel-preset-react-app'),
        {
          runtime: hasJsxRuntime ? 'automatic' : 'classic',
        },
      ],
    ],
    
    plugins: [
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent:
                '@svgr/webpack?-svgo,+titleProp,+ref![path]',
            },
          },
        },
      ],
      isEnvDevelopment &&
        shouldUseReactRefresh &&
        require.resolve('react-refresh/babel'),
    ].filter(Boolean),
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
    // See #6846 for context on why cacheCompression is disabled
    cacheCompression: false,
    compact: isEnvProduction,
  },
},

这种情况下，一般都是先编译再执行的，所以在前端页面代码里面看的话，并不会有babel的迹象，也并不会有如下类似代码：

<script type='text/babel'></script>

当然也不会存在对babel.js、react.js、甚至react-dom.js的显式引用，因为这些都是打包软件去处理的。

相关链接

• https://newsn.net/say/react-start.html
• https://newsn.net/say/create-react-app-eject.html
• https://newsn.net/say/webpack-babel-react-1.html
• https://newsn.net/say/webpack-babel-react-2.html

总结

在本文中，苏南大叔描述了，在react相关页面中，使用babel的情况。原理上非常好懂，属于入门级别的文章知识点。更多react相关文章，请点击下面的链接：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。