如何在该项目上安装React

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

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

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.jsmodule.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

谢谢。

anbo123 回答:如何在该项目上安装React

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

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

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

,

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

如果可能的话,请保持UI(反应)和后端(节点)分开

本文链接:https://www.f2er.com/3036453.html

大家都在问