web-dev-qa-db-ja.com

webpack開発サーバーでjsonファイルのような静的アセットを提供する方法は？

私は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データを提供したいと思います。

どうすればこれを達成できますか？

このセットアップはWebサーバーを実行しているので、-axios.get('http://localhost:3000/user.json')のようなものを使用してjsonファイルを提供できることを願っています。

reactjswebpackwebpack-dev-server
10
Anunaya Srivastava

ここにあるFacebookの「create-react-app」の手順からアプリを起動している場合： https://facebook.github.io/react/docs/installation.html

次に、Reactルーターが邪魔になってリクエストを傍受することなく、URLからJSONファイルにアクセスできる簡単な方法を見つけました。

あなたがしなければならないのは、その 'create-react-app'スキャフォールディングのindex.jsにあり、最初の行として次のようなものを追加します。import './ myJsonFile.json';

http：// localhost：3000/myJsonFile.json は、ルックアップに干渉するReactルーターなしで、ファイルを正しくフェッチします。

（アプリを生成するために別の方法を使用したため、正確にはあなたの質問ではなかったかもしれませんが、これは「create-react-app」をベースとして使用する人にとっては答えになります）。

2
Daniel

Webpackファイルローダーを使用して、他の静的ファイルであるかのようにwebpackにそのファイルを提供させることができます。画像。これを「メイン」（エントリポイント）ファイルで試すことができます。

require("file-loader?name=api/[name].[ext]!./user.json");

このrequireは、出力先でそのファイルを「発行」するようにwebpackに指示するために必要です。それ以外の場合は、それについて何も知りません。

また、ファイルローダーをインストールする必要があります。

npm install --save-dev file-loader

次に、webpack-dev-serverを使用すると、 http：// localhost：8080/api/user.json からそのファイルにアクセスできるはずです（webpack devサーバーの構成に従ってlocalhost：8080を置き換えます）。

ただし、json apiをスタブ化する必要がある場合は、次のようなものを使用します。

より柔軟性があり、適切なコンテンツタイプで応答を提供する、クロスドメインの問題をテストする、JSONPなどのより高度な処理を実行できます。

より単純なものが必要な場合は、次を使用できます。 https://www.npmjs.com/package/superstatic 静的ファイルを提供するだけの場合、またはさらに単純な場合は、これらのワンライナーの開始方法を確認してください。静的jsonファイルを提供するための単純なhttpサーバー：

https://Gist.github.com/willurd/5720255

1
fabio.sussetto