Question

我从头开始创建了一个React.js项目，并使用自己的webpack配置等...我试图将mobx放入该项目中，但由于导入不起作用而无法这样做。

如您所见：

我尝试了类似import mobx from 'mobx或import { observable } from 'mobx/lib/mobx'之类的所有方法，但最后一种解决方案有效，但根据官方文档所述，https://mobx.js.org/best/pitfalls.html

并不是一个好习惯

我共享了webpack配置，package.json，.babelrc

webpack配置：

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

module.exports = {
    entry: path.join(__dirname,'src','index.js'),
    output: {
        path: path.join(__dirname,'build'),
        filename: 'index.bundle.js',
    },
    mode: process.env.NODE_ENV || 'development',
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
    devServer: {
        contentBase: path.join(__dirname,'src'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                loaders: ['file-loader'],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname,'public','index.html'),
            filename: 'index.html',
            favicon: path.join(__dirname,'public','favicon.png'),
        }),
    ],
};

package.json：

{
  "name": "client",
  "version": "1.0.0",
  "description": "front-end built in reactjs for the js under pressure project",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "yarn lint && babel-node ./node_modules/webpack/bin/webpack --mode production",
    "start:dev": "yarn lint && babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --mode development --open",
    "lint": "babel-node ./node_modules/eslint/bin/eslint.js \"src/**/*.js\" \"src/**/*.jsx\" --fix"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/node": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-eslint-comments": "^3.1.1",
    "eslint-plugin-jest": "^22.6.4",
    "eslint-plugin-react": "^7.13.0",
    "html-webpack-plugin": "^3.2.0",
    "mobx": "^5.10.0",
    "mobx-react": "^6.0.3",
    "mobx-react-devtools": "^6.1.1",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.6.0"
  },
  "dependencies": {
    "@material-ui/core": "^4.0.2",
    "@material-ui/icons": "^4.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-ace": "^7.0.2",
    "react-dom": "^16.8.6"
  }
}

babelrc：

{
    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
}

以及我正在尝试的是： mobx / index.js：

import { observable } from 'mobx';

class AppStore {
    @observable test = 'test';
    /*    @observable level = 0;
    @observable check = 0;
    @observable skiped = false;
    @observable state = 0;
    @observable count = 0;
    @observable levels= [];
    @observable test = [];
*/
    /*   @action.bound
    levelUp() {
        this.level += 1;
    }

    @action.bound
    startTimer() {
        setInterval(() => {
            this.count += 1;
        }, 1000);
    }

    @action.bound
    skiped() {
        this.skip = !this.skip;
    }

    @action.bound
    startTest() {
        this.state = 1;
    }

    @action.bound
    endTest() {
        this.state = 2;
        clearInterval(this.startTime());
    }*/
}

export default AppStore;

和src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from 'containers/app.jsx';
import AppStore from 'mobx/index.js';

const store = new AppStore();
/**
 * DOM component - setup main component into root div
 * @reactProps {none} none - none
 * @desc Entry point of the react app
 * @extends {ReactDOM}
 * @public
 * @version 1.0
 * @since 1.0
 */
/*eslint react/jsx-filename-extension: 0*/
ReactDOM.render((
    <App store={ store } />
),
document.getElementById('root'));

任何帮助将不胜感激。感谢您的时间和愉快的编码！！！

Answer 1

这是您的问题：

        resolve: {
            modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        },

这不是问题，除了您必须小心不要将目录命名为与npm软件包相同。如果将mobx目录更改为store，则模块解析应该可以再次正常工作。

导入可观察到的或未从mobx导入的任何内容

1 个答案: