Question

我得到了这个给我的起点应用程序，我必须对此做出回应。

它具有以下结构的基本节点应用程序：

regedit.exe

我也得到了这个package.json：

notepad.exe

babel文件MyProject src scripts index.js styles index.scss index.html webpack webpack.common.js webpack.config.dev.js webpack.config.prod.js .babelrc的配置如下：

{
  "name": "frontend-assessment-test",
  "version": "1.0.0",
  "description": "A frontend assessment test for our new pirates, which are willing to come on board.",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js  --colors",
    "start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/holidaypirates/frontend-assessment-test"
  },
  "author": "HolidayPirates",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/holidaypirates/frontend-assessment-test/issues"
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "cross-env": "^6.0.3",
    "css-loader": "^3.2.0",
    "eslint": "^6.5.1",
    "eslint-loader": "^3.0.2",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^4.0.0-beta.8",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "core-js": "^3.3.3"
  }
}

因此，因为我看到在webpack中添加了babel和样式加载器，所以如果我只安装webpack.common.js和module.exports = { entry: { app: Path.resolve(__dirname, '../src/scripts/index.js') }, output: { path: Path.join(__dirname, '../build'), filename: 'js/[name].js' }, optimization: { splitChunks: { chunks: 'all', name: false } }, plugins: [ new CleanWebpackPlugin(), new CopyWebpackPlugin([ { from: Path.resolve(__dirname, '../public'), to: 'public' } ]), new HtmlWebpackPlugin({ template: Path.resolve(__dirname, '../src/index.html') }) ], resolve: { alias: { '~': Path.resolve(__dirname, '../src') } }, module: { rules: [ { test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' }, { test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, use: { loader: 'file-loader', options: { name: '[path][name].[ext]' } } }, ] } };，则可以在index.js中开始使用react文件导入反应并尝试呈现基本组件。

但是我收到一个错误，react

任何想法我都应该在webpack配置或react-dom以外的其他软件包中进行哪些更改和Module build failed (from ./node_modules/babel-loader/lib/index.js):以便在react中使用react？

谢谢。

Answer 1

此代码库将不支持react js。 Babel用于将无法理解的JS部分（主要是es6或更高版本）转换为es5。简单的babel配置不适用于您的情况，每个库都有自己的语法方式。

例如，要使用react，您应该安装 babel-preset-react ，这对于react是必需的。

以上内容将理解jsx并做出反应，并将其转换为es5。

Answer 2

首先安装 react ，看看您好吗，然后尝试将node.js项目添加到该反应中，尝试不断添加小块并查看结果

如果可能的话，请保持UI（反应）和后端（节点）分开

如何在该项目上安装React

2 个答案: