引入同目录外部Babel类型React脚本后浏览器无内容渲染的问题

• Babel Standalone的默认处理范围有限：它初始化时只会扫描页面中内嵌在HTML标签内部的type="text/babel"脚本内容，直接对JSX语法做转译执行；对于同类型通过src属性引入的外部独立js文件，默认不会主动拉取资源、完成转译流程，等于你的application.js从一开始就没有被Babel解析。
• 浏览器同源策略的拦截限制：就算手动给Babel配置了外部资源拉取逻辑，如果你是直接双击打开index.html、用file://协议访问页面，Chrome会默认禁止页面读取同目录下的本地js文件，控制台会抛出跨域（CORS）类报错，导致资源加载完全失败。

完全不需要。
你当前用CDN引入React+Babel Standalone的方案，本身就是为了入门学习设计的零配置快速跑通方案，不需要一开始就搭Node、npm、打包工具这类工程化环境，只要规避掉file协议的访问限制，就能正常实现拆分文件的开发流程。

• 第一步：替换本地访问协议，启动轻量静态服务
  不要直接双击打开index.html文件，在你的项目根目录（也就是放index.html和application.js的同一个文件夹）打开终端，选你电脑上已经装了的工具执行对应命令就行：
  • 如果装了Python：执行python -m http.server 8000，之后在Chrome访问http://localhost:8000即可
  • 如果装了Node.js：执行npx serve .，按照提示给出的本地端口地址访问即可
    这一步就能解决file协议下的跨域资源读取限制。
• 第二步：调整脚本引入的写法，适配Babel的处理逻辑
  给外部application.js加type="text/babel"的时候，不要给这个script标签加async、defer这类异步加载属性，不然Babel初始化扫描的时候会定位不到对应资源。
  如果启动静态服务后页面还是不渲染，可以手动触发Babel对外部文件的转译，在Babel Standalone的CDN引入标签后面加一段短逻辑就行：

  手动触发外部JS文件转译的参考代码

  // 拉取本地application.js内容，交给Babel完成JSX转译后执行
  fetch('./application.js')
    .then(res => res.text())
    .then(rawCode => Babel.transform(rawCode, { presets: ["react"] }).code)
    .then(transformedScript => eval(transformedScript))
  

• 排错快速定位
  打开Chrome开发者工具的控制台面板，先筛除红色报错：
  • 如果报跨域错误，就是你还在用file://协议打开页面，切到localhost的服务地址即可
  • 如果报Babel is not defined错误，就是Babel Standalone的CDN脚本引入顺序错了，要确保Babel的脚本加载在你的业务代码、转译触发逻辑之前

内容的提问来源于stack exchange，提问作者GEBRU