在 React src 文件夹下添加 html 和 js 代码

Question

I have folder(say SDK ) inside my React public folder containing a bunch of html and js/jQuery files.

I'm accessing these files inside my react code as a iframe with src http://example.com/SDK/homepage.html .

How can I move this SDK folder from public/SDK to src/SDK in the React project and then access homepage.html in the iframe in my React code?

I've bootstrapped the app with Create React App and using yarn build to build it.

Answer 1

Well, the official way is exactly like you are doing it: put it into the public folder (see https://create-react-app.dev/docs/using-the-public-folder/ ).

If you, for what ever reason, still want to put it in src , then you would need your build tool to copy the files during build time.

If you use Webpack then you could use the copy plug in https://webpack.js.org/plugins/copy-webpack-plugin

When you are using create-react-app and you do not want to eject (so you could use the webpack solution), then you could also write a small script within your package.yml to copy the files into the build folder. This - however - is not so great to maintain and will not scale.

{
  "name": "some-project",
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "cp './src/SDK' './public/SDK' && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  ...
}

This is the relevant part: "build": "cp './src/SDK' './public/SDK' && react-scripts build",