I keep getting
when I try to link two of my scripts together when I put 'webpack app.js bundle.j' in the command line
bash: /usr/local/bin/webpack: No such file or directory
Jaffers-MacBook-Pro:test JafferSyed$
I am not sure what is the problem
HTML
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
JS (app.js)
var math = require('./math.js');
I am trying to require the math.js in the /node_modules/mathjs
here is what my node modules folder looks like
enter image description here
Here is what my files list looks like
enter image description here
I am presumed to believe that a bundle.js file should appear when I am to add 'webpack app.js bundle.js' on the command line of my terminal
I am not sure as to why there it says no such file or directory
Related
I am currently working on a CNC project, I want to be able to parse DXF files into objects in JS.
I started with SVGs instead but the drawings did not export as shapes but as lines (a square as four lines and not a shape with four points). So I began to search for a JS library that would help me work with DXF files, I found "dxf-parser" and "three-dxf". I wasn't able to run an example with neither... That might be because I have a very limited experience with vanilla JS , I usually use P5.
So, in conclusion, I am searching for a working example projects of any of these libraries.
What I did by now was to write in the command line:
npm init -y
npm i dxf parser
Then I opened an html file:
<!DOCTYPE html>
<html lang="en">
<head>
</script>
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script type="module" src="index.js"></script>
</body>
</html>
And a JS file:
// Grab fileText in node.js or browser
import parse from 'dxf-parser';
const fileText = "./dxfTests/test.dxf";
try {
const dxf = parse(fileText);
}catch(err) {
console.log(err.stack);
}
Then I start click the go live button in VScode and i get this error:
127.0.0.1/:1 Uncaught TypeError: Failed to resolve module specifier "dxf-parser". Relative references must start with either "/", "./", or "../".
Help would be very much appreciated!
When i want to put js file i get this error
GET http://localhost:3000/src/app.js net::ERR_ABORTED 404 (Not Found)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pug with Java</title>
</head>
<body>
<script src="src/app.js"></script>
</body>
</html>
Structure of the project
You need to build your app. If you open package.json you will see scripts to build the app.
Build it and include the js from build folder. If your index.html and js file is in same location you dont need to src/ in script src.
Most probably app.js will be changed to main.js after build. Check it in build folder.
Build command will be something like
npm run prod
or
npm run prod-en
Once you do a build you will not have the src folder.
In which file is your HTML? If it's in index.pug you should try <script src="app.js"></script> as it's in the same folder.
if you use express.js ,try this ,
add this code app.use(express.static(path.join(__dirname, ""))); into your app.js to identify the exacly path. to your file.js
I'm having trouble with some components running in MS IE 10/11.
And according to this arcticle from Angular.io (https://angular.io/docs/ts/latest/guide/browser-support.html) I need to import an external script.
<script src="node_modules/core-js/client/shim.min.js"></script>
Which I placed in my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
...
<script src="../node_modules/core-js/client/shim.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
But when i build for production it doesn't add it to the build, it just leaves it there ending in a script not found error when running the application.
I'm probably missing something but I don't know what.
Thanks in advance!
In your .angular-cli.json file, locate (or create) the "scripts" key in the definition for your app, and add an entry in the array for the shim.js script, e.g.:
"scripts": [
"../node_modules/core-js/client/shim.min.js"
],
Restart your ng serve or rebuild your bundles and you should be good to go.
Hope this helps!
You need to add CSS files and JS files in the angular-cli.json file. If you are not using angular-cli in this case you need to configure in the build tool which you are using
I'm just starting out with typescript. I wanted to try working with this mankala example from within Visual Studio. Eventually I got it working but I had to include all of the .js files that were generated from .ts files in my default.htm file. The .htm file in the example only included one file - the one that contained the entry point. I'm guessing that there's something set wrong in my configuration that I'm compensating for by the multiple .js includes. Can anyone tell me what I'm doing wrong?
More details follow...
Here's what the original .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
And this is what my modified .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="Driver.js"></script>
<script type="text/javascript" src="Features.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="Position.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
To create the project I created a default ( not quite empty ) typescript project, deleted the automatically created app.ts file from that project and then added 6 new .ts files with the same names as the .ts files in the example. Then I copied the .ts files from the example over the new .ts files that were created by VS. I replaced the automatically generated app.css file with the play.css file from the example and replaced the contents of the automatically generated default.htm file with the contents of the play.htm from the sample. This didn't run but after I added the additional .js files to default.htm it did.
I'm using Visual Studio 2012 Express for the Web and the typescript 0.8.3.1 VS extension. I'm using the Chrome browser on windows7.
The difference here is how the compiler got invoked.
When you build the Mankala sample, assuming you read the README, you ran
tsc Driver.ts -out game.js
The -out flag tells the compiler to concatenate the compilation into one big .js file. However, the default behavior in Visual Studio projects is to build side-by-side, i.e. base.ts creates base.js, Features.ts creates Features.js, etc.
You can fix your project file by adding a <TypeScriptOutFile>game.js</TypeScriptOutFile> element to the project in the same <PropertyGroup> as the other TypeScript settings (near line 57 in a default new project). Be sure to add to both the Debug and Release PropertyGroup elements if you want the same behavior in both compilation settings, or create a new non-conditional PropertyGroup.
My situation
I'm checking out spine.js for a web application I'm thinking of writing. I've read all the documentation and gone through all the examples. Now I'm trying to run the spine.contacts example project on my own Windows 7 laptop.
I'm running node v0.6.6 for Windows
What I've done
Installed node
Installed spine, spine-app and hem through npm
Extracted spine.contacts in a folder
Run npm install . inside the folder, which created the node_modules folder with a bunch of directories inside, including jqueryify
Run hem server to start the test server
Basically followed all the instructions to the letter
The problem
Running the application in Chrome (http://localhost:9294), JavaScript throws an exception at line 9 in index.html (I've included index.html below). It reads "Uncaught module jqueryify not found". I know the jqueryify dependency was installed by npm earlier, but I tried removing that line anyway and linking in jQuery manually. Now I got the error "Uncaught module index not found" in application.js. That certainly isn't a dependency error, since the index.js file is local and it's the main script file in the project.
So it seems there's a problem with the require function. I've Googled a lot and nothing I've found has indicated that spine.js shouldn't work on Windows.
Any ideas?
Some links
The GIT page for spine.contacts
A demo of the exact same project on herokuapp.com
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>App</title>
<link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
<script src="/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQuery = require("jqueryify"); // I'm line 9!!
var exports = this;
jQuery(function(){
var App = require("index");
exports.app = new App({el: $("#article")});
});
</script>
</head>
<body>
<header id="header"><h1>Spine Contacts</h1></header>
<article id="article"></article>
</body>
</html>
Hem is not supported on Windows. I found myself in the same situation and tried the same approaches.
More info here: https://github.com/maccman/hem/issues/23
Try inserting that before line 9:
for(var winPath in require.modules)
{
path = winPath.replace(/\\/g, '/');
path = path.match('/node_modules/') ? path.split('/node_modules/')[1] : path;
path = path.match('/app/') ? path.split('/app/')[1] : path;
require.modules[path] = require.modules[winPath];
}
I think a fix will be there soon.