I've been using Webpack for some time, but it was a little bit too extensive for me.
That's why I wanted to start off with Parcel, to get the basics of bundling projects together.
Let us say I have a basic index.html file, which has a link to a JavaScript file.
Within this javascript file, I have a couple of dependencies imports.
It should look a little bit like this.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Helloo</h1>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
and script.js
import "../styles/sass/main.scss";
import is from "is_js";
const myString = "Hello World";
Now, when I bundle the index.html file using
parcel bundle index.html --public-url .
i would like to use chrome developer tools console to console (from the console) some javascript as e.g. myString
But because parcel bundles everything inside one function, this variable is not accessible and the console returns:
Uncaught ReferenceError: sections is not defined
at :1:1
How can i still debug my projects inside the console using parcel as a bundle processor?
Related
I am trying to learn Three.js by starting with a Three.js tutorial that uses webpack. (You can find the tutorial repo here.) Everything works until I try to import the midi-player-js package I installed with npm. Nothing I try works. I've tried the require syntax, as well as the import * as syntax. Different errors are thrown, but the most common is that Player (one of the module's classes) cannot be found.
What is going wrong? How can I import npm packages with this setup?
My sample script.js file looks like this, right now:
import * as MidiPlayer from "midi-player-js"
const player = new MidiPlayer.Player(function(event) {
console.log("Ticked")
});
// Load a MIDI file
player.loadFile('PATH_TO_MIDI_FILE');
player.play();
Keep in mind that I've tried other import syntax's, though.
EDIT: Starter HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>
I'm trying to learn React and Javascript. I try to understand how import and export works in ES6, so I put all three files index.html, index.js, and lib.js in the same folder. When I included index.js in my html file, it gave me the error
Uncaught TypeError: Failed to resolve module specifier "lib". Relative references must start with either "/", "./", or "../".
When I changed the name of index.js to index2.js, everything worked fine. I think the problem is that I was not supposed to put index.html and index.js in the same folder but I don't understand why. Can some please explain?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<script type="module" src="./index.js"></script>
</body>
</html>
index.js
import {square} from './lib.js'
console.log(square(3))
lib.js
export function square(x){
return x*x
};
It errors when you link index.js because 2 files can not have the same not name as any other file in the folder even if they have different file extensions. This is why when you change the name to index2.js it does not error.
It's not really the files having the same name in the same folder as the webpage, I found that if you use Firefox instead of Chrome, the problem goes away.
I'm trying to use the PriorityQueue functionality provided by Google Closure, but I can't seem to be able to figure out how to do it without using the Closure Compiler. Since I'm not using any custom modules, it seems that I shouldn't need to use the Compiler.
My folder structure is as follows:
/Project/html/index.html
/Project/ThirdParty/closure-library
My index.html file contains:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="../ThirdParty/closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.structs');
goog.require('goog.structs.PriorityQueue');
</script>
</head>
<body></body>
</html>
The above however gives me the following:
goog.require could not find: goog.structs
goog.require could not find: goog.structs.PriorityQueue
I'm a bit at a loss as to why that happens as my code seems to be in line with the example given at https://developers.google.com/closure/library/docs/gettingstarted
How did you retrieve the library? If you "npm install" you should have a deps.js file next to base.js which should be everything you need.
I'm new to Angular and recently I started working on a simple personal SPA project. It was created using the angular cli, and the folder structure is nothing special:
- myApp
----e2e
----node_modules
----src
--------app
------------ main app module with two .ts components and html for each of them
...
Everything works fine when I use ng serve: I can see my components on localhost:4200 and Angular's functionality works as a charm.
However, when I run ng build and from inside the newly created dist folder I open index.html, I can't see my components at all.
The index.html file is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RoutingDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
I get no errors in the console for missing files and all of the JS and CSS files are being successfully read by the index.html.
Can someone explain why am I not seeing the components?
So you need to serve your page, easiest way is to do npm i -g http-server and the run http-server from command lint in your dist folder, then you will be able to see your page
I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>