webpack打包React时 7.X版本的babel 一些问题

webpack打包React时 7.X版本的babel 一些问题

React报错：Module parse failed: Unexpected token

问题描述

学习React出现的一个问题
从官网拿到的一个例子

class HelloMessage extends React.Component {
    render() {
      return (
        

          Hello {this.props.name}
        
      );
    }
  }
  
  ReactDOM.render(
    ,
    document.getElementById('hello-example')
  );

在用webpack打包时报错

RROR in ./src/index.js 9:8
Module parse failed: Unexpected token (9:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured 
to process this file. See https://webpack.js.org/concepts#loaders
|     render() {
|       return (
>         

|           Hello {this.props.name}
|         

解决方法

我总结了几个原因：

1. 没有在.babelrc中配置@babel/preset-react

   • 解决方法：在.babelrc文件中添加"presets": ["@babel/preset-react"]

2. webpack中没有配置loader

   • 解决方法：在webpack中添加

   module: {
       rules: [
           {
               test: /\.jsx?$/,
               exclude: /(node_modules|bower_components)/,
               use: {
                   loader: 'babel-loader',
                   options: {
                       presets: ['@babel/preset-env']
                   }
               }
           }
       ]
   },
   

3. 版本错误
   

   • 这是官方给出的版本对应
   • npm install -D babel-loader @babel/core @babel/preset-env webpack

4. 把@babel/preset-react下载成babel-preset-react

箭头函数报错

具体报错

client:159 ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-stage-0' from 'E:\Exercise\react\movie'
    at Function.resolveSync [as sync] (E:\Exercise\react\movie\node_modules\resolve\lib\sync.js:81:15)
    at resolveStandardizedName (E:\Exercise\react\movie\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePreset (E:\Exercise\react\movie\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (E:\Exercise\react\movie\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (E:\Exercise\react\movie\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at E:\Exercise\react\movie\node_modules\@babel\core\lib\config\config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (E:\Exercise\react\movie\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (E:\Exercise\react\movie\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (E:\Exercise\react\movie\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)

解决方法

这里的提示就很明显，找不到模块@babel/preset-stage-0，于是下载并在配置好.babelrc文件后

babel新配置

具体报错

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] E:\Exercise\react\movie\src\index.js: 
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
  long run to explicitly add which proposals to use.

For a more automatic migration, we have updated babel-upgrade,
https://github.com/babel/babel-upgrade to do this for you with
"npx babel-upgrade".

If you want the same configuration as before:

{
  "plugins": [
    // Stage 0
    "@babel/plugin-proposal-function-bind",

    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
  ]
}

If you're using the same configuration across many separate projects,
keep in mind that you can also create your own custom presets with
whichever plugins and presets you're looking to use.

module.exports = function() {
  return {
    plugins: [
      require("@babel/plugin-syntax-dynamic-import"),
      [require("@babel/plugin-proposal-decorators"), { "legacy": true }],
      [require("@babel/plugin-proposal-class-properties"), { "loose": false }],
    ],
    presets: [
      // ...
    ],
  };
};
   (While processing: "E:\\Exercise\\react\\movie\\node_modules\\@babel\\preset-stage-0\\lib\\index.js")
    at _default (E:\Exercise\react\movie\node_modules\@babel\preset-stage-0\lib\index.js:9:9)
    at E:\Exercise\react\movie\node_modules\@babel\core\lib\config\full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (E:\Exercise\react\movie\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (E:\Exercise\react\movie\node_modules\gensync\index.js:254:32)
    at evaluateAsync (E:\Exercise\react\movie\node_modules\gensync\index.js:284:5)
    at Function.errback (E:\Exercise\react\movie\node_modules\gensync\index.js:108:7)
    at errback (E:\Exercise\react\movie\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (E:\Exercise\react\movie\node_modules\gensync\index.js:183:31)
    at eval (webpack:///./src/index.js?:1:7)
    at Object../src/index.js (http://localhost:8080/main.js:1187:1)
    at __webpack_require__ (http://localhost:8080/main.js:726:30)
    at fn (http://localhost:8080/main.js:101:20)
    at eval (webpack:///multi_(webpack)-dev-server/client?:3:18)
    at Object.0 (http://localhost:8080/main.js:1198:1)
    at __webpack_require__ (http://localhost:8080/main.js:726:30)
    at http://localhost:8080/main.js:793:37
    at http://localhost:8080/main.js:796:10

解决方法

经过百度等搜索引擎，查出了原因，是因为版本的问题，新的babel不是这么配置了

解决方法：

1. 先把babel都升级到最新，执行命令npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
2. 修改.babelrc文件

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

总结

这是本人通过查阅资料以及折腾，总结的几个问题，如果有更好的解决方案，可以在下面评论，欢迎一起讨论