reactjs - 使用 npm 编译 .jsx 文件

Question

我正在尝试按照本教程创建一个完整的堆栈 Django 和 React。

现在，我应该运行开发脚本以创建 main.js 文件，但我遇到了问题。

如果将我的文件命名为 ____.js，我将无法返回 HTML 代码。如果我将文件命名为 ___.jsx，我只能这样做。但是当我这样做时，脚本不起作用，说“找不到模块：错误：无法解析'./components/App'”

我的文件树：

├── package-lock.json
├── package.json
├── unimanager
│   ├── db.sqlite3
│   ├── ems
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   │   ├── __init__.cpython-37.pyc
│   │   │   ├── admin.cpython-37.pyc
│   │   │   ├── apps.cpython-37.pyc
│   │   │   ├── models.cpython-37.pyc
│   │   │   ├── permissions.cpython-37.pyc
│   │   │   ├── serializers.cpython-37.pyc
│   │   │   ├── urls.cpython-37.pyc
│   │   │   └── views.cpython-37.pyc
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── migrations
│   │   │   ├── 0001_initial.py
│   │   │   ├── __init__.py
│   │   │   └── __pycache__
│   │   │       ├── 0001_initial.cpython-37.pyc
│   │   │       └── __init__.cpython-37.pyc
│   │   ├── models.py
│   │   ├── permissions.py
│   │   ├── serializers.py
│   │   ├── tests.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── frontend
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   │   ├── __init__.cpython-37.pyc
│   │   │   ├── admin.cpython-37.pyc
│   │   │   ├── models.cpython-37.pyc
│   │   │   ├── urls.cpython-37.pyc
│   │   │   └── views.cpython-37.pyc
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── migrations
│   │   │   ├── __init__.py
│   │   │   └── __pycache__
│   │   │       └── __init__.cpython-37.pyc
│   │   ├── models.py
│   │   ├── src
│   │   │   ├── components
│   │   │   │   ├── App.jsx
│   │   │   │   └── layout
│   │   │   │       └── Header.jsx
│   │   │   └── index.js
│   │   ├── static
│   │   │   └── frontend
│   │   │       └── main.js
│   │   ├── templates
│   │   │   └── frontend
│   │   │       └── index.html
│   │   ├── tests.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── manage.py
│   └── unimanager
│       ├── __init__.py
│       ├── __pycache__
│       │   ├── __init__.cpython-37.pyc
│       │   ├── settings.cpython-37.pyc
│       │   ├── urls.cpython-37.pyc
│       │   └── wsgi.cpython-37.pyc
│       ├── settings.py
│       ├── urls.py
│       └── wsgi.py
├── webpack.config.js
└── .babelrc

包.json：

{
  "name": "kayra",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./unimanager/frontend/src/index.js --output ./unimanager/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./unimanager/frontend/src/index.js --output ./unimanager/frontend/static/frontend/main.js"
  },
  "repository": {
    (redacted)
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "(redacted)",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

.babelrc：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-class-properties"]
}

webpack.config.js：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                }
            },
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    }
}

index.js：

import App from './components/App'

应用程序.jsx：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Header from './layout/Header'

class App extends Component {
    render() {
        return (<Header />)
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

预期结果是没有错误，编译和呈现索引 html 文件。当前结果是命令“npm run build”或“npm run dev”时出现此错误消息：

> kayra@1.0.0 dev /Users/kayra/Projects/Unitraining/kayra
> webpack --mode development ./unimanager/frontend/src/index.js --output ./unimanager/frontend/static/frontend/main.js

Hash: f556d5c5e69069927c65
Version: webpack 4.33.0
Time: 1310ms
Built at: 06/07/2019 3:44:24 PM
  Asset      Size  Chunks             Chunk Names
main.js  4.11 KiB    main  [emitted]  main
Entrypoint main = main.js
[./unimanager/frontend/src/index.js] 35 bytes {main} [built]

ERROR in ./unimanager/frontend/src/index.js
Module not found: Error: Can't resolve './components/App' in '/Users/kayra/Projects/Unitraining/kayra/unimanager/frontend/src'
 @ ./unimanager/frontend/src/index.js 1:0-35
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! kayra@1.0.0 dev: `webpack --mode development ./unimanager/frontend/src/index.js --output ./unimanager/frontend/static/frontend/main.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the kayra@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kayra/.npm/_logs/2019-06-07T22_44_24_365Z-debug.log

标签： reactjsnpm