Làm cách nào để phân phối các nội dung tĩnh như tệp json trong máy chủ webpack dev?

Question

Tôi đang xây dựng một ứng dụng phản ứng. Tôi đã sử dụng yeoman để tạo ra cấu trúc ứng dụng phản ứng. Tôi đang sử dụng webpack để gói tất cả các tệp js. My package.json is -

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

Tôi đang sử dụng axios để thực hiện yêu cầu http. Hiện tại, tôi chưa mã hóa một máy chủ để trả về dữ liệu json. Do đó, để kiểm tra chức năng của ứng dụng, tôi muốn phục vụ dữ liệu json tĩnh từ một tệp json.

Tôi làm cách nào để đạt được điều này?

Vì thiết lập này đang chạy máy chủ web, tôi hy vọng tệp json có thể được phân phối bằng cách sử dụng một cái gì đó như - axios.get('http://localhost:3000/user.json').

Answer 1

Bạn có thể sử dụng trình tải tệp webpack để có gói web phân phối tệp đó như thể nó là bất kỳ tệp tĩnh nào khác, ví dụ: một tấm ảnh. Bạn có thể thử với điều này trong (entrypoint) tập tin "chính" của bạn:

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

này đòi hỏi chỉ là cần thiết để nói webpack để "phát ra" rằng tập tin trong điểm đến đầu ra, nếu không nó không biết gì về nó.

Bạn cũng cần phải cài đặt các tập tin-loader:

npm install --save-dev file-loader

Sau đó, với webpack-dev-server bạn sẽ có thể truy cập vào tập tin đó từ http://localhost:8080/api/user.json (thay thế localhost: 8080 theo bạn webpack dev cấu hình máy chủ).

Tuy nhiên, nếu bạn cần còn sơ khai một api json, tôi muốn sử dụng một cái gì đó như thế này:

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

mà là linh hoạt hơn và có thể xử lý cao cấp hơn điều như phân phát phản hồi với loại nội dung phù hợp, kiểm tra các vấn đề tên miền chéo, JSONP, v.v.

Nếu bạn muốn ing đơn giản hơn, bạn có thể sử dụng này: https://www.npmjs.com/package/superstatic chỉ đơn giản là phục vụ các tập tin tĩnh, hoặc thậm chí đơn giản hơn, hãy kiểm tra như thế nào những một lớp lót để bắt đầu một máy chủ http đơn giản để phục vụ các tập json tĩnh của bạn:

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

Answer 2

Nếu bạn đang bắt đầu ứng dụng của bạn từ hướng dẫn của Facebook 'tạo-phản ứng ứng dụng' tìm thấy ở đây: https://facebook.github.io/react/docs/installation.html

Sau đó, tôi tìm thấy một cách dễ dàng để có thể truy cập các file JSON từ URL mà không có phản ứng Router nhận được trong cách và chặn yêu cầu.

Tất cả những gì bạn phải làm là trong index.js của mình về giàn giáo 'tạo phản ứng-ứng dụng' đó, thêm một cái gì đó như thế này làm dòng đầu tiên: nhập './myJsonFile.json';

Và đó là điều đó, như sau đó sẽ chuyển đến: http://localhost:3000/myJsonFile.json sẽ tìm nạp tệp một cách chính xác mà không cần bộ phản ứng của bộ định tuyến can thiệp vào tra cứu.

(có thể đó không phải là câu hỏi của bạn vì bạn đã sử dụng một cách khác để tạo ứng dụng, nhưng đây sẽ là câu trả lời cho những người sử dụng 'ứng dụng tạo phản ứng' làm cơ sở).