React + Jsx 多页面配置

  1. 多页面用不到 create-react-app,项目结构需要手动配置。
  2. 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\

评论