0

尝试学习 webpack，我已经达到了教程的第一部分，但是当我尝试自己冒险时，我遇到了问题。我真的试图从这个页面设置入门示例。 https://www.daftail.org/docs/getting-started

这是我的 package.json 文件

{
  "name": "draftail-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "webpack-cli": "^4.9.1",
    "webpack-core": "^0.6.9"
  },
  "dependencies": {
    "draft-js": "^0.10.5",
    "draftail": "^1.4.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  }
}

这是我的 webpack.config.js 文件：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

和我的 index.js 文件：

import React from "react"
import ReactDOM from "react-dom"

import { DraftailEditor, BLOCK_TYPE, INLINE_STYLE } from "draftail"

const initial = JSON.parse(sessionStorage.getItem("draftail:content"))

const onSave = (content) => {
  console.log("saving", content)
  sessionStorage.setItem("draftail:content", JSON.stringify(content))
}

const editor = (
  <DraftailEditor
    rawContentState={initial || null}
    onSave={onSave}
    blockTypes={[
      { type: BLOCK_TYPE.HEADER_THREE },
      { type: BLOCK_TYPE.UNORDERED_LIST_ITEM },
    ]}
    inlineStyles={[{ type: INLINE_STYLE.BOLD }, { type: INLINE_STYLE.ITALIC }]}
  />
)

ReactDOM.render(editor, document.querySelector("#root"))

我在运行 webpack 时遇到的错误是：

assets by status 2.03 KiB [cached] 1 asset
./src/index.js 39 bytes [built] [code generated] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/glenn/projects/draftail-demo/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (14:3):

  12 |
  13 | const editor = (
> 14 |   <DraftailEditor
     |   ^
  15 |     rawContentState={initial || null}
  16 |     onSave={onSave}
  17 |     blockTypes={[

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:541:17)
    at Parser.raiseWithData (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:534:17)
    at Parser.expectOnePlugin (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:3595:18)
    at Parser.parseExprAtom (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:11981:18)
    at Parser.parseExprSubscripts (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:11584:23)
    at Parser.parseUpdate (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:11564:21)
    at Parser.parseMaybeUnary (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:11539:23)
    at Parser.parseMaybeUnaryOrPrivate (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:11353:61)
    at Parser.parseExprOps (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:11360:23)
    at Parser.parseMaybeConditional (/home/glenn/projects/draftail-demo/node_modules/@babel/parser/lib/index.js:11330:23)

webpack 5.65.0 compiled with 1 error and 1 warning in 2506 ms

我已验证 babel 已作为预设列在我的 webpack.config.js 中，但我仍然收到该错误。知道出了什么问题吗？谢谢。

4

0 回答 0