Question

我的错误是：

“ ./ src / index.js中的错误
  模块构建失败（来自./node_modules/babel-loader/lib/index.js）：
  语法错误：D：/ cource / React project / webpacktutorial / src / index.js：意外令牌（7:16）“

我不知道为什么每次我都会发生此错误，这可能是webpack的问题，我使用CSS加载器，babel加载器或许多加载器，但此问题仍未解决。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

webpack.config.js

const path = require( 'path');

module.exports = {
    mode: 'none',
   entry: path.join(__dirname,  '/src/index.js'),
   output: {
       filename:  'App.js',
       path: path.join(__dirname,  '/dist')},
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader:  "babel-loader",
       }]
   }
}

package.json

{
  "name": "webpacktutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "html-webpack-plugin": "3.2.0",
    "react-hot-loader": "^4.11.1",
    "webpack": "4.16.2",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.5"
  }
}

App.js


import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Answer 1

尝试以此更改“模块”部分，我认为这是更稳定的选择：

T = -23.4 - 0.00222 * h

Answer 2

您可以尝试我的webpack配置

function makeRule(range, whenTextEqualTo, setBackground) {
  return SpreadsheetApp.newConditionalFormatRule()
    .whenTextEqualTo(whenTextEqualTo)
    .setBackground(setBackground)
    .setRanges([range])
    .build();
}

function DHGreen() {
var sheet = SpreadsheetApp.getActiveSheet();
var range = sheet.getRange("D3:P43");
var rules = sheet.getConditionalFormatRules();
rules.push(makeRule(range, "DH", "#00ff00"));
rules.push(makeRule(range, "Mazie", "#0000ff"));
rules.push(makeRule(range, "Herald", "#9900ff"));
sheet.setConditionalFormatRules(rules);
}

完整配置可以查看here

我的babel.rc

module.exports = {
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

我的package.json依赖项

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-es2015-destructuring",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

Answer 3

Source code

使用您的package.json创建自己的存储库后，我能够复制您的确切错误。我能够解决该错误：

“ ./ src / index.js中的错误
  模块构建失败（来自./node_modules/babel-loader/lib/index.js）：
  语法错误：D：/ cource / React project / webpacktutorial / src / index.js：意外令牌（7:16）“

通过在目录的根目录中添加我自己的.babelrc来

。我的.babelrc看起来像这样：

{
    "presets": ["env", "react"]
}

此后，我收到有关css-loader的错误。为了解决这个问题，我做到了：

npm i -D style-loader css-loader

获取软件包并将新规则添加到webpack.config.js：

rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    },
    {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }
]

Webpack（模块构建失败）

3 个答案: