Я хотел создать URI для моего JSON-файла, чтобы json-подобный animals.json импортировался как URL-адрес, например localhost: 8000 / static / media / animals.json, а не получать содержимое JSON. file
Для этого мне сказали добавить код фоллинга в файл webpack.config.js:
{
test: /\.json$/,
loader: 'url-loader',
options: {
limit: false,
publicPath: 'assets'
},
type:'javascript/auto'
}
Я добавил вышеупомянутые строки в webpack.config.js. .. Я также удостоверился, что установил url-загрузчик на клиентскую часть приложения React ... Однако я все еще получаю следующие ошибки в файле, куда я импортирую файл json:
Error in ./src/components/layout/Landing.js
Module not found: 'url-loader' in /Users/bliss/Documents/Coder/MERN/javascript_game_book/client/src/components/layout
@ ./src/components/layout/Landing.js 34:15-61
Мой файл Landing.js выглядит так:
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';
import { assets } from '../../game_book/utilities';
import {
makeCanvas, rectangle, circle, sprite,
line, group, text, stage, render, remove,
frame, frames
} from "../../game_book/display";
//import maze_text from '../../mazes/images/maze_text.png';
// import cat_png from './images/cat.png'
import cat_png from '../../game_book/images/cat.png';
import puzzler_otf from '../../game_book/fonts/puzzler.otf';
import animals_json from '../../game_book/images/animals.json';
// var animals_json = require('./animals.json')
import fairy_png from '../../game_book/images/fairy.png';
import tiger_png from '../../game_book/images/tiger.png';
import hedgehog_png from '../../game_book/images/hedgehog.png';
// import button_json from '../../game_book/images/button.json';
import up_png from '../../game_book/images/up.png';
import over_png from '../../game_book/images/over.png';
import down_png from '../../game_book/images/down.png';
console.log('assets', assets)
class Landing extends React.Component {
componentDidMount() {
if(this.props.auth.isAuthenticated){
this.props.history.push('/dashboard');
}
// let canvas_01 = document.createElement("canvas");
// canvas_01.setAttribute("width", "256");
// canvas_01.setAttribute("height", "256");
// canvas_01.style.border = "1px dashed black";
// document.body.appendChild(canvas_01);
// let ctx_01 = canvas_01.getContext("2d");
//
// assets.load([
// cat_png,
// // "./animals.json"
// ]).then(() => setup_01());
//
// function setup_01() {
// console.log("All the images have been loaded");
// console.log(assets["../../game_book/images/cat.png"]);
//
// console.log('assetsX', assets)
//
// console.log('cat_png', cat_png)
//
// //Displays: <img src="images/cat.png">
//
// //Display the image of the cat on the canvas
// // ctx.drawImage(assets["../../game_book/images/cat.png"], 64, 64);
//
//
// ctx_01.drawImage(assets[cat_png], 64, 64);//this one works for react
//
// }
//
//
// let canvas_02 = makeCanvas(256, 256);
// canvas_02.style.border = "1px dashed black";
// canvas_02.style.backgroundColor = "white";
// document.body.appendChild(canvas_02);
//
// //Create the context as a property of the canvas
// // let ctx2 = canvas2.getContext("2d");
//
//
// let blueBox_02 = rectangle(64, 64, "blue", "none", 0, 32, 32);
// blueBox_02.rotation = 0.2;
//
// let redBox_02 = rectangle(64, 64, "red", "black", 4, 160, 100);
// redBox_02.alpha = 0.5;
// redBox_02.scaleY = 2;
//
// let greenBox_02 = rectangle(64, 64, "yellowGreen", "black", 2, 50, 150);
// greenBox_02.scaleX = 0.5;
// greenBox_02.rotation = 0.8;
//
// //Render the sprites
// render(canvas_02);
//
// //
// let canvas3 = makeCanvas(312, 312);
//
// let stage = {
// //Set some default properties that the sprites will
// //need to reference
// x: 0,
// y: 0,
// gx: 0,
// gy: 0,
// alpha: 1,
// width: canvas3.width,
// height: canvas3.height,
// parent: undefined,
// //Give the stage `addChild` and `removeChild` methods
// children: [],
// addChild(sprite) {
// this.children.push(sprite);
// sprite.parent = this;
// },
// removeChild(sprite) {
// this.children.splice(this.children.indexOf(sprite), 1);
// }
// };
//
// console.log('blueBox2 rectangle')
// //Make the first parent sprite: the blueBox2
// let blueBox2 = rectangle(96, 96, "blue", "none", 0, 64, 54);
//
// //Make the goldBox and add it as a child of the blueBox2
// let goldBox = rectangle(64, 64, "gold");
// blueBox2.addChild(goldBox);
//
// //Assign the goldBox's local coordinates (relative to the blueBox2)
// goldBox.x = 24;
// goldBox.y = 24;
//
// //Add a grayBox to the goldBox
// let grayBox = rectangle(48, 48, "gray");
// goldBox.addChild(grayBox);
// grayBox.x = 8;
// grayBox.y = 8;
//
// //add a pinkBox to the grayBox
// let pinkBox = rectangle(24, 24, "pink");
// grayBox.addChild(pinkBox);
// pinkBox.x = 8;
// pinkBox.y = 8;
//
// console.log('pinkBox', pinkBox)
// //Display the `pinkBox's` gx and gy values
// console.log('pinkBox.gx' ,pinkBox.gx);
//
// console.log('middle')
// //Displays: 104
// console.log( 'pinkBox.gy',pinkBox.gy);
// //Display: 96
//
// console.log('after')
//
// //Rotate the `blueBox2`
// blueBox2.rotation = 0.8;
//
// //Rotate the `grayBox`
// grayBox.rotation = 0.3;
//
// //Scale the `blueBox2`
// blueBox2.scaleX = 1.5;
//
// //Set the `blueBox2`'s alpha
// blueBox2.alpha = 0.5
//
// //Set the `grayBox`'s alpha
// grayBox.alhpa - 0.5;
//
// //blueBox2.alpha = 0.3;
// //goldBox.alpha = 0.3;
//
// //blueBox2.rotation = 0.2;
// //blueBox2.alpha = 0.3;
// //blueBox2.visible = false;
//
// console.log('creating redBox2')
// let redBox2 = rectangle(64, 64, "red", "black", 4, 220, 180);
// let greenBox2 = rectangle(64, 64, "yellowGreen", "black", 4, 200, 200);
// let violetBox = rectangle(64, 64, "violet", "black", 4, 180, 220);
//
//
// redBox2.layer = 1;
//
// gameLoop();
// function gameLoop() {
// console.log('gameLoop')
// requestAnimationFrame(gameLoop, canvas3);
//
// render(canvas3);
// }
// //03_allTheSprites.html
//
//
let canvas_03_allTheSprites = makeCanvas(512, 512);
//Assign a height and width to the `stage` object
stage.width = canvas_03_allTheSprites.width;
stage.height = canvas_03_allTheSprites.height;
console.log('03')
console.log('animals_json', animals_json)
debugger
assets.load([
puzzler_otf,
cat_png,
animals_json,
fairy_png,
tiger_png,
hedgehog_png,
// button_json
]).then(() => setup_03());
var blueBox_03, pinkBox_03, message_03, goldBox_03, grayBox_03;
function setup_03() {
console.log('setup_03')
blueBox_03 = rectangle(96, 96, "blue", "none", 0, 54, 64);
blueBox_03.pivotX = 0.25;
blueBox_03.pivotY = 0.25;
//Make the goldBox and add it as a child of the blueBox_03
goldBox_03 = rectangle(64, 64, "gold");
blueBox_03.addChild(goldBox_03);
//Assign the goldBox_03's local coordinates (relative to the blueBox_03)
goldBox_03.x = 24;
goldBox_03.y = 24;
//Add a grayBox_03 to the goldBox_03
grayBox_03 = rectangle(48, 48, "gray");
goldBox_03.addChild(grayBox_03);
//use `setPosition` to quickly qet the sprite's x and y values
grayBox_03.setPosition(8, 8);
//add a pinkBox to the grayBox
pinkBox_03 = rectangle(24, 24, "pink");
grayBox_03.addChild(pinkBox_03);
pinkBox_03.x = 8;
pinkBox_03.y = 8;
pinkBox_03.pivotX = 0.75;
pinkBox_03.pivotY = 0.75;
//Remove the grayBox_03 from the pinkBox_03 and add the
//pinkBox_03 back to the stage
//grayBox_03.removeChild(pinkBox_03);
//stage.addChild(pinkBox_03);
//Display the `pinkBox_03's` gx and gy values
console.log(pinkBox_03.gx);
//Displays: 104
console.log(pinkBox_03.gy);
//Dsiplays: 96
//Rotate the `blueBox_03`
blueBox_03.rotation = 0.8;
//Rotate the `grayBox_03`
grayBox_03.rotation = 0.3;
//Scale the `blueBox_03`
blueBox_03.scaleX = 1.5;
//Set the `blueBox_03`'s alpha
blueBox_03.alpha = 0.5;
//Set the `grayBox_03`'s alpha
grayBox_03.alpha = 0.5;
/*Depth layering*/
let redBox_03 = rectangle(64, 64, "red", "black", 4, 220, 180);
let greenBox_03 = rectangle(64, 64, "yellowGreen", "black", 4, 200, 200);
let violetBox_03 = rectangle(64, 64, "violet", "black", 4, 280, 220);
//Move the redBox_03 to a higher layer
redBox_03.layer = 1;
//Swap the depths of the redBox and greenBox
stage.swapChildren(redBox_03, greenBox_03);
/*Positioning */
//Create a box around which to center things
let limeBox_03 = rectangle(64, 64, "lime");
limeBox_03.shadow = true;
limeBox_03.setPosition(350, 80);
//Create a box and position it above the limeBox
let brownBox_03 = rectangle(32, 32, "brown");
limeBox_03.putTop(brownBox_03, 0, -16);
//Position a box to the right of the limeBox_03, offset
//by 16 pixels on the x axis
let navyBox_03 = rectangle(32, 32, "navy");
limeBox_03.putRight(navyBox_03, 16);
//Postion a box to the bottom of the limeBox_03 and
//offset it by 16 pixels on the y axis
let peruBox_03 = rectangle(32, 32, "peru");
limeBox_03.putBottom(peruBox_03, 0, 16);
//Position a box to the left of the limeBox and
//offset it by -16 pixels on the x axis
let wheatBox_03 = rectangle(32, 32, "wheat");
limeBox_03.putLeft(wheatBox_03, -16, 0);
//Center a box inside the limeBox_03
let hotPinkBox_03 = rectangle(32, 32, "hotPink");
limeBox_03.putCenter(hotPinkBox_03);
//Test the `circular` property
limeBox_03.circular = true;
console.log(limeBox_03.diameter);
limeBox_03.circular = false;
console.log(limeBox_03.radius);
/* Circles */
let cyanCircle_03 = circle(64, "cyan", "red", 4, 64, 280);
//cyanCircle_03.pivotX = 0.75;
//cyanCircle_03.pivotY = 0.75;
/* Lines */
let blackLine_03 = line("black", 4, 200, 64, 264, 128);
let redLine_03 = line("red", 4, 200, 128, 264, 64);
let greenLine_03 = line("green", 4, 264, 96, 200, 96);
let blueLine_03 = line("blue", 4, 232, 128, 232, 64);
/* Text */
message_03 = text("Hello World!", "24px Futura", "black", 330, 230);
//Change the words that a text sprite displays using the `content`
//property
//message_03.content = "Anything you like";
/* Groups */
let boxGroup_03 = group(redBox_03, greenBox_03, violetBox_03);
//boxGroup_03.removeChild(redBox_03);
console.log(`group width: ${boxGroup_03.width} group height: ${boxGroup_03.height}`);
//The width and height of text won't be set
//until the text is rendered
console.log(`width: ${message_03.width}`);
//Displays: width: 0
render(canvas_03_allTheSprites);
console.log(`width: ${message_03.width}`);
/* Images */
//From an Image object
let cat_03 = sprite(assets[cat_png], 64, 410);
cat_03.width = 64;
cat_03.height = 64;
//From a texture atlas tileset frame
let tiger_03 = sprite(assets[tiger_png], 192, 410);
tiger_03.width = 64;
tiger_03.height = 64;
tiger_03.tiling = true;
tiger_03.tileX = 20;
tiger_03.tileY = 20;
//From a tileset frame
let fairyFrames_03 = frame(
assets[fairy_png],
0, 0, 48, 32
);
let fairy2_03 = sprite(fairyFrames_03, 224, 326);
//From an array of image objects
let animalImages_03 = [
assets[hedgehog_png],
assets[tiger_png],
assets[cat_png]
];
let hedgehog_03 = sprite(animalImages_03, 32, 410);
hedgehog_03.width = 64;
hedgehog_03.height = 64;
//From an array of texture atlas frames
let buttonFrames_03 = [
assets[up_png],
assets[over_png],
assets[down_png]
]
let button_03 = sprite(buttonFrames_03, 300, 280);
//Use `gotoAndStop` to set the sprite's frame number
fairy2_03.gotoAndStop(2);
button_03.gotoAndStop(1);
//Use the global `remove` method to remove any sprites from the
//game. They'll automatically be removed from the parents they
//belong to.
//remove(redBox_03, greenBox_03);
//Displays: width: 141.84375
gameLoop_03()
function gameLoop_03() {
requestAnimationFrame(gameLoop_03, canvas_03_allTheSprites);
blueBox_03.rotation += 0.01;
goldBox_03.rotation -= 0.02;
pinkBox_03.rotation += 0.03;
message_03.rotation += 0.01;
render(canvas_03_allTheSprites);
}
}
}//componentDidMount
render () {
return (
<div className="landing">
<div className="dark-overlay landing-inner text-light">
<div className="container">
<div className="row">
<div className="col-md-12 text-center">
<h1 className="display-3 mb-4">Developer Connector
</h1>
<p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
<hr />
<Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
<Link to="/login" className="btn btn-lg btn-light">Login</Link>
</div>
</div>
</div>
</div>
</div>
);
}
}
Landing.propTypes = {
auth: PropTypes.object.isRequired
}
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(mapStateToProps)(Landing);