使用eval函数运行JSX代码

项目中有个地方需要开放给使用人员编写JS代码，当写自定义代码的时候使用了JSX我发现就会报错

Unexpected token '<'

简单代码示例如下：

column.render = (text, record) => {
  const href = record.href;
  return <a href={href} target="_blank" rel="noopener noreferrer">{text}</a>;
};

发现是eval函数无法正常运行JSX代码，还好网上有解决办法，使用babel将JSX代码转译成js后，再交给eval函数就能成功运行了。

引入Babel

最简单的当然是script引入：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

由于是React项目，最开始我想着使用npm，安装了@babel/standalone，但是发现这个npm库似乎没有导出函数。未果，于是只能使用script的方式

引入React

然后发现又报错React未定义，原来是Babel实现JSX转译需要依赖React，于是只能把React和React-Dom都引入

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

优化速度

至此，代码终于可以成功使用eval函数运行

但是我发现在网站中加载这三个CDN资源的时间，每个平均要600ms，三个也就是将近2s，也太过于久了。

最终还是选择将资源放在本地，进行本地加载，这样虽然打包体积增大，但是页面速度很快。