Jak udostępniać zasoby statyczne, takie jak plik json, w serwerze dewelopera Webpack?

Question

Buduję aplikację reagowania. Użyłem yomana do wygenerowania struktury aplikacji reagowania. Używam webpacka do pakowania wszystkich plików js. Moja package.json jest -

{ 
    "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" 
    ] 
    } 
} 

Używam axios do żądania HTTP. Obecnie nie zakodowałem serwera, który zwróciłby dane json. Dlatego, aby przetestować funkcjonalność aplikacji, chcę podać statyczne dane json z pliku json.

Jak mogę to osiągnąć?

Ponieważ ta konfiguracja działa na serwerze WWW, mam nadzieję, że plik json może być obsługiwany przy użyciu czegoś podobnego - axios.get('http://localhost:3000/user.json').

Answer 1

Możesz użyć programu ładującego plik Webpack, aby pakiet sieciowy wyświetlał ten plik tak, jakby był innymi statycznymi plikami, np. obraz. Można spróbować z tym w „głównym” pliku (punkt_wejścia):

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

wymagałoby to jest po prostu potrzebne, aby powiedzieć WebPACK do „emitować” ten plik w okolicy wyjścia, w przeciwnym razie nie wiemy nic na temat to.

Należy również zainstalować plik-ładowarka:

npm install --save-dev file-loader

następnie WebPACK-dev-serwer powinien być w stanie uzyskać dostęp do pliku z http://localhost:8080/api/user.json (zastąpić localhost: 8080 według Państwa WebPack dev konfiguracja serwera).

Jednak jeśli trzeba skrótową API json, wolałbym użyć czegoś, takie jak:

• https://www.npmjs.com/package/json-server
• https://www.npmjs.com/package/dyson

że są bardziej elastyczne i mogą obsługiwać bardziej zaawansowane takie rzeczy jak obsługa odpowiedzi z odpowiednim typem treści, testowanie problemów z różnymi domenami, JSONP itp.

Jeśli chcesz coś ing prostsze, można użyć to: https://www.npmjs.com/package/superstatic po prostu służyć pliki statyczne, lub nawet prostsze, sprawdź, jak te jednej wkładki, aby uruchomić prosty serwer HTTP służyć statycznych plików json:

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

Answer 2

Jeśli uruchamiasz aplikację z poziomu instrukcji "create-react-app" na Facebooku, dostępnej tutaj: https://facebook.github.io/react/docs/installation.html

Następnie znalazłem łatwy sposób na uzyskanie dostępu do plików JSON z adresu URL bez przeszkadzania routerowi i przechwycić żądanie.

Wszystko, co musisz zrobić, to w swoim pliku index.js z tego rusztowania "tworzenie-reakcja-aplikacja", dodaj coś takiego jak pierwsza linia: import "./myJsonFile.json";

I to, jak potem będzie: http://localhost:3000/myJsonFile.json będzie poprawnie pobrać plik bez React routera ingerencji w Lookup.

(może to nie było dokładnie twoje pytanie, ponieważ używałeś innego sposobu generowania aplikacji, ale byłaby to odpowiedź dla tych, którzy używają "create-react-app" jako bazy).