使用babel和Web pack并在没有create-react-app的情况下使用react

Question

我的目标是创建一个简单的应用程序，并在不使用create-react-app的情况下输出一个js独立文件和一个css独立文件。

我有两个类似的功能组件

const Card = () => {

  return(
    <div>test</div>
  )
}

export default Card;

我的app.js文件

import ReactDOM from 'react-dom';
import Card from './Card';

ReactDOM.render(<Card />, document.getElementById('root'));

似乎我需要Web Pack，所以这是我的Web Pack配置文件

const path = require("path");

module.exports = {
  entry:  "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.js"
  },
  resolve: {
    extensions: [".js"]
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
};

我安装了以下软件包

"dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "eslint": "^7.0.0",
    "eslint-config-google": "^0.14.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }

正在运行nix babel src / app.js引发错误

Unexpected token 

   | 
> 7 |   ReactDOM.render(<Card />, document.getElementById('root'))
    |                   ^
  8 | }

这里的目标是生成一个JS文件和一个CSS文件，这就是为什么我不使用create-react-app的原因。

在互联网上搜索会显示很多结果，例如使用CDN不想使用的react和babel。

我如何将纯净JS的JSK编译为一个JS缩小文件？

编辑

我确实遵循了其他问题，这是我得到的错误

Error: Plugin/Preset files are not allowed to export objects, only functions.

。babelrc文件

{
  "presets": ["es2015", "stage-1", "react"]
 }

web pack.config.js

const path = require("path");

module.exports = {
  entry:  "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.js"
  },
  module: {
    loaders: [{
        test: /\.jsx?$/,
        loader: 'babel',
        query:
        {
            presets:['es2015', 'react']
        }
    }]
},
};

Answer 1

这是一个精简的工作示例，它不使用CRA（但具有类似CRA的功能），并且输出单个文件捆绑资产：Single Webpack Bundle Kit

---

包含：

• 将所有.js捆绑并缩小为单个static/js/bundle.min.js
• 将所有.(s)css捆绑并缩小为单个static/css/bundle.min.css
• 热模块更换
• 保存时的皮棉（披肩）
• CSS和SCSS全局或局部样式表（类似于CRA，.module.(s)css是局部的，否则没有.module是全局的）
• 图像和字体导入（woff2|ttf|woff|eot|svg|png|jpg|jpeg）
• src中的自动别名目录（使用~将为src中的目录别名，例如import Card from "~components/Card"；这消除了诸如import Card from "../../../components/Card"的相对导入）
• 包括注释，例如config目录中的每个文件是什么以及它如何补充webpack.config.js

---

安装：

1-复制样板库：

git clone [email protected]:mattcarlotta/react-starter-kit.git

2-运行yarn或npm install以安装依赖项。

3-运行yarn dev或npm run dev以启动开发服务器。

4-运行yarn build或npm run build以创建到dist的已编译应用程序，然后运行yarn start或npm start以启动本地生产服务器。

---

或者，如果您正在寻找输出单个文件资产的CRA，请查看此answer (includes repo)。