reactjs - 如何在 webpack 开发服务器中提供 json 文件等静态资源？

Question

我正在构建一个 react 应用程序。我已经使用 yeoman 来生成 React 应用程序结构。我正在使用 webpack 来捆绑所有 js 文件。我的 package.json 是 -

{
  "dependencies": {
    "axios": "^0.15.0",
    "classnames": "^2.2.5",
    "es6-shim": "^0.35.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-mdl": "^1.7.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.0",
    "redux": "^3.5.1",
    "todomvc-app-css": "^2.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^6.2.2",
    "babel-core": "^6.13.0",
    "babel-eslint": "^6.0.2",
    "babel-loader": "^6.2.0",
    "babel-plugin-istanbul": "^2.0.1",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.2.0",
    "babel-preset-react": "^6.1.18",
    "browser-sync": "^2.9.11",
    "browser-sync-spa": "^1.0.3",
    "css-loader": "^0.23.1",
    "del": "^2.0.2",
    "es6-shim": "^0.35.0",
    "eslint": "^3.2.2",
    "eslint-config-xo-react": "^0.7.0",
    "eslint-config-xo-space": "^0.12.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-babel": "^3.1.0",
    "eslint-plugin-react": "^5.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-filter": "^4.0.0",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-sass": "^2.1.1",
    "gulp-util": "^3.0.7",
    "html-webpack-plugin": "^2.9.0",
    "jasmine": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-junit-reporter": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-phantomjs-shim": "^1.1.2",
    "karma-webpack": "^1.7.0",
    "node-sass": "^3.4.2",
    "phantomjs-prebuilt": "^2.1.6",
    "postcss-loader": "^0.8.0",
    "react-addons-test-utils": "^15.0.1",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "webpack": "2.1.0-beta.20",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  },
  "scripts": {
    "build": "gulp",
    "serve": "gulp serve",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "extends": [
      "xo-react/space",
      "xo-space/esnext"
    ]
  }
}

我正在使用 axios 发出 http 请求。目前，我还没有编写服务器来返回 json 数据。因此，为了测试应用程序的功能，我想从 json 文件提供静态 json 数据。

我怎样才能实现这个目标？

由于此设置正在运行网络服务器，我希望可以使用类似 - axios.get('http://localhost:3000/user.json') 的方式提供 json 文件.

Answer 1

如果您从此处找到的 Facebook 的“create-react-app”说明启动应用程序:https://facebook.github.io/react/docs/installation.html

然后我找到了一种简单的方法，可以从 URL 访问 JSON 文件，而不会让 React Router 妨碍并拦截请求。

您所要做的就是在“create-react-app”脚手架的index.js中，添加如下内容作为第一行: 导入'./myJsonFile.json';

就这样，接下来: http://localhost:3000/myJsonFile.json 将正确获取文件，而 React 路由器不会干扰查找。

(也许这不完全是您的问题，因为您使用了不同的方式来生成应用程序，但这对于那些使用“create-react-app”作为基础的人来说是一个答案)。