本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

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

苏南大叔:react代码,什么时候需要配合babel进行编译? - react-babel
react代码,什么时候需要配合babel进行编译?(图3-1)

本文测试环境:win10chrome@89.0.4389.90react@16create-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>

苏南大叔:react代码,什么时候需要配合babel进行编译? - babel-js
react代码,什么时候需要配合babel进行编译?(图3-2)

因为使用了jsx语法,所以需要要对对应的script标签标记typetext/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的引用。

但是由于这种预编译工具很多,比如webpackgulp等等,配置上也会有所不同。以默认的脚手架工具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,
  },
},

苏南大叔:react代码,什么时候需要配合babel进行编译? - react-webpack-babel
react代码,什么时候需要配合babel进行编译?(图3-3)

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

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

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

相关链接

总结

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

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