React + Jsx 多页面配置
- 多页面用不到 create-react-app,项目结构需要手动配置。
- Jsx 不能带到生产环境去,会导致每次加载 js 文件时都要做语法转换,所以需要用 babel 预处理。
项目根目录下,创建 package.json:
1 | npm init -y |
把 html 文件放在 src 目录下,js 文件放在 src/js 目录下。html 中引入对应的 js:
1 | <script src="/js/index.js"></script> |
不要加 type=”text/babel”,路径其实对应的是预处理后的、被转换的 js 文件。
https://reactjs.org/docs/add-react-to-a-website.html
安装 babel 命令行:
1 | npm install --save-dev @babel/core @babel/cli |
https://babeljs.io/docs/en/babel-cli/
安装 babel React 插件:
1 | npm install --save-dev @babel/preset-react |
presets 可以放在配置文件里,也可以通过命令行声明。
https://babeljs.io/docs/en/babel-preset-react
通过命令行预处理 jsx:
1 | npx babel --presets @babel/preset-react .\src\js\index.js --out-dir .\build\js\ |