问题描述

我的目标是创建一个简单的应用程序并在不使用 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'));

看起来我需要 webpack 所以这是我的 webpack 配置文件

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，我不想这样做。

如何将 JSK 编译为纯 JS 到一个 JS 缩小文件中？

编辑

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

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

.babelrc 文件

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

网页包.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']
        }
    }]
},
};

标签： reactjswebpackbabeljs

解决方案

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

包括：

将所有内容捆绑并缩小.js为一个static/js/bundle.min.js
将所有内容捆绑并缩小.(s)css为一个static/css/bundle.min.css
热模块更换
保存时 Lint (eslint)
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 git@github.com: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，请查看此答案（包括 repo）。

reactjs - 在没有 create-react-app 的情况下使用带有 react 的 babel 和 web pack

问题描述

解决方案

包括：

安装：

推荐阅读