【问题标题】:Webpack compiling throwing error with mobxWebpack 使用 mobx 编译抛出错误
【发布时间】:2018-08-23 20:10:31
【问题描述】:

我使用 webpack 作为模块捆绑器和 babel 进行转译。 我当前的 npm 版本是 3.10.9,node 版本是 v6.9.2。

包.json

"devDependencies": { "axios": "^0.17.0", "babel-eslint": "^8.0.1", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-es2015-rollup": "^3.0.0", "babel-preset-mobx": "^1.0.2", "babel-preset-react": "^6.11.1", "babel-register": "^6.26.0", "babel-core": "^6.9.1", "babel-loader": "^7.1.2", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.9.0", "babel-preset-stage-1": "^6.5.0", "clean-webpack-plugin": "^0.1.17", "compression": "^1.6.1", "cors": "^2.8.4", "cross-env": "^5.0.5", "css-loader": "^0.23.1", "csslint": "^1.0.5", "csslint-loader": "^1.0.0", "eslint": "^4.10.0", "eslint-loader": "^1.9.0", "eslint-plugin-react": "^7.4.0", "express": "^4.9.8", "express-https-redirect": "^1.0.0", "express-manifest": "^0.1.1", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "html-loader": "^0.5.5", "html-webpack-plugin": "^2.30.1", "http2": "^3.3.7", "https": "^1.0.0", "image-webpack-loader": "^3.4.2", "jasmine-core": "^2.8.0", "json-loader": "^0.5.4", "karma": "^1.7.1", "karma-chrome-launcher": "^2.2.0", "karma-jasmine": "^1.1.1", "karma-webpack": "^2.0.9", "less": "^3.0.0-alpha.3", "less-loader": "^4.0.5", "moment": "^2.19.2", "node-sass": "^4.5.3", "postcss": "^6.0.13", "postcss-css-variables": "^0.8.0", "postcss-cssnext": "^3.0.2", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.6", "postcss-mixins": "^6.1.1", "postcss-nested": "^2.1.2", "postcss-start-to-end": "^1.0.1", "prop-types": "^15.6.0", "react": "^16.2.0", "react-doc-generator": "^1.2.5", "react-docgen-plugin": "^0.1.1", "react-dom": "^16.2.0", "react-lazy-load": "^3.0.13", "react-redux": "^5.0.6", "react-responsive-carousel": "^3.1.28", "redux": "^3.7.2", "rollup-plugin-babel": "^3.0.3", "rollup-plugin-commonjs": "^9.0.0", "rollup-plugin-node-resolve": "^3.0.3", "rollup-plugin-postcss": "^1.3.3", "rollup-plugin-replace": "^2.0.0", "sass-loader": "^4.1.1", "style-loader": "^0.19.0", "stylelint": "^8.2.0", "sw-precache-webpack-plugin": "^0.11.4", "url-loader": "^0.6.2", "webfonts-loader": "^4.0.0", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.1", "webpack-node-externals": "^1.6.0", "workbox-webpack-plugin": "^2.1.2", "wrapper-webpack-plugin": "^1.0.0" }, "dependencies": { "expres": "0.0.5", "express": "^4.14.0", "express-minify-html": "^0.11.5", "html-minifier": "^3.5.6", "jade": "^1.11.0", "mobx": "^3.0.0", "mobx-react": "^4.1.0", "pa11y-ci": "^1.3.1", "redux-promise": "^0.5.3", "stylelint-webpack-plugin": "^0.10.2" }, "babel": { "plugins": [ "transform-es2015-modules-commonjs" ] },

当我编译时,我得到以下问题。

不推荐使用默认导出 (import mobx from 'mobx'),并且在 mobx@4.0.0 中不起作用 请改用import * as mobx from 'mobx' D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41 抛出新的构造函数(this._buildMessage(msg)); ^

ReferenceError: [BABEL] D:\mgm\dmp\fe-react\webpack.config.babel.js: 未知选项:base.Reaction。查看http://babeljs.io/docs/usage/options/ 了解有关选项的更多信息。

此错误的常见原因是存在没有相应预设名称的配置选项对象。示例:

无效: { presets: [{option: value}] } 有效的: { presets: [['presetName', {option: value}]] }

有关预设配置的更多详细信息,请参阅http://babeljs.io/docs/plugins/#pluginpresets-options。 在 Logger.error (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41:11) 在 OptionManager.mergeOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20) 在 OptionManager.init (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) 在 File.initOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:212:65) 在新文件 (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:135:24) 在 Pipeline.transform (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\pipeline.js:46:16) 在 Object.transformFileSync (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\api\node.js:152:10) 编译时 (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:118:20) 在装载机 (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:144:14) 在 Object.require.extensions.(匿名函数) [as .js] (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:154:7)

请帮忙。

【问题讨论】:

  • 所以...您是否按照错误中的明确说明进行操作?
  • @JaromandaX 是,但没有帮助。
  • 那么,你在D:\mgm\dmp\fe-react\webpack.config.babel.js中改变了什么
  • 注意:第一个“错误”只是一个警告(目前)——问题是Unknown option: base.Reaction
  • webpack 配置。 {test: /.js?$/,exclude: /node_modules/, 使用: [{ loader: "babel-loader", options: { presets: [ ['env', { modules: false, targets: { browsers: [ 'last 2 versions', 'safari >= 7', 'ie >= 10'] } }], 'stage-0', 'react' ], cmets:true } }] },

标签: javascript reactjs webpack babeljs mobx


【解决方案1】:

首先,从.babelrc 中删除 mobx 预设。

{
  "presets": ["mobx"]
}

然后npm i --save-dev babel-plugin-transform-decorators-legacy 并在下面添加.babelrc 配置。

{
  "presets": ["react", "env", "stage-2"],
  "plugins": [
    "transform-decorators-legacy", // must on the top of plugins array.
    ... ...
  ]
}

最后,你必须删除GitHub上那个0开头的babel-preset-mobx,我认为它是不稳定的。

【讨论】:

    猜你喜欢
    • 2018-06-11
    • 2016-12-08
    • 2019-10-25
    • 2020-10-31
    • 2020-01-04
    • 2017-08-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多