前提・実現したいこと
現在、babel、webpack等の勉強しています。
Ajax で POST するときに ブラウザAPIの FormData を使いたくて、
form-data を NPM でインストールして使っているのですが、
Node.js(jest) で実行している段階ではうまくいくのに、webpack
後にブラウザで使おうと思うと、FormDataに内容が入りません。
なにか足りない部分があると思うのですが、恥ずかしながら自分では
わからない状況です。
何卒、ご教授をお願い致します。
環境
package.json
{ "name": "testbabel", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "jest" }, "author": "", "license": "ISC", "devDependencies": { "@babel/cli": "^7.2.3", "@babel/core": "^7.2.2", "@babel/preset-env": "^7.3.1", "babel-loader": "^8.0.5", "jest": "^24.1.0", "webpack": "^4.29.3", "webpack-cli": "^3.2.3" }, "dependencies": { "@babel/polyfill": "^7.2.5", "form-data": "^2.3.3", "isomorphic-fetch": "^2.2.1" } }
.babelrc
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage" } ] ] }
webpack.config.js
module.exports = { mode: 'development', output: { library: 'main', }, module: { rules: [ { test: /.js$/, use: [ { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', ] } } ] } ] } };
src/index.js (作ったソースファイル)
const FormData = require('form-data'); let formData = new FormData(); formData.append('test', 'test !'); console.log(JSON.stringify(formData));
src/test/src.index.test.js (JESTでテストするファイル)
import index from '../../../src/index'; test('index', () => {});
テスト実行
上記の環境で、コマンド『npx jest』を打ち込み、テストを行いました。
結果は下記の通り、console に値が出力されました。
PASS src/__test__/src/index.test.js √ index (2ms) console.log src/index.js:5 {"_overheadLength":103,"_valueLength":6,"_valuesToMeasure":[],"writable":false,"readable":true,"dataSize":0,"maxDataSize":2097152,"pauseStreams":true,"_released":false,"_streams":["----------------------------254955744156479606926924\r\nContent-Disposition: form-data; name=\"test\"\r\n\r\n","test !",null],"_currentStream":null,"_boundary":"--------------------------254955744156479606926924"} Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 2.727s Ran all test suites.
ブラウザでの実行
コマンド『nodemodules/.bin/webpack』で、dist.js ファイルを作り、それを読むようなHTMLファイルを作りました。
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>babeltest</title> <script type="text/javascript" src="dist/main.js"></script> </head> <body> </body> </html>
TOMCAT上に載せ、クロームからページにアクセスすると、コンソールは次のとおりでした。
{} index.js
テスト環境と本番環境で、このように formData の中身が変わるのは
何が原因なのでしょうか?
何卒、ご教授をお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/26 04:45