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!
Related
I'm trying to use some protocol buffer code generated with protoc for javascript. I got some javascript files that i can import (after choosing the commonjs style) into other javascript files.
I've installed an npm dependency called google-protobuf and am able to bundle all javascript with webpack. When i try to run the page in firefox i get no errors related to this, chrome however gives me:
Invalid regular expression: /[Ö‘-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]/: Range out of order in character class
I've tried adding some additional tags to <meta> and <script> and they don't work. I've never seen an error like this and don't know where to start looking.
The end goal is, i'd like all my npm i and all my import { Foo } from 'foo.js' to work on a web page without errors.
What webpack injected using HTMLWebpackPlugin is:
<script type="text/javascript" src="frontseat.bundle.js"></script>
Originally there are no <meta> tags, i just added the one under head so it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...
Try to update your regex to this regex below:
[Ö‘\-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]
And your meta tag is like this? <meta charset="utf-8"> with this charset
I got the same issue as you have.I cannot upgrade google-protobuf over than 3.6.1. Only version 3.6.1 works for me before. All versions later 3.6.1 raise the same errors in my project.
However, the <meta charset="utf-8"> helps now on my side. I create a minimum sample and hope it can give you some idea.
google-protobuf version: 3.11.2
index.js
import * as pb from 'google-protobuf';
console.log(pb);
build command
npx webpack index.js -o bundle.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bundle.js"></script>
</head>
</html>
Then, you should be able to see something like this on chrome devtools console without the error.
{Map: ƒ, Message: ƒ, BinaryReader: ƒ, BinaryWriter: ƒ, ExtensionFieldInfo: ƒ, …}
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
I have followed the simple step-by-step instructions in the Basic Aurelia Project Setup guide. But starting the index.html in a browser results in the config-esnext.js file throwing: "JavaScript runtime error: 'System' is undefined". This is on the first line: System.config({...
The browser's output window has this to say:
"Could not find file 'C:\Users\Bruce\Dropbox\Projects Aurelia\Basic Aurelia Setup\scripts\system.js.map'..Unhandled exception at line 1, column 1 in http://localhost:56477/scripts/config-esnext.js"
Is there some "map" configuration missing from the simple instructions? I am running the project from Visual Studio 2015, configured for Esnext.
The comments to the original question have some good discussion going. But for the sake of providing an "answer" for others to find, here goes.
Without seeing your index.html file, I can't determine exactly what is going on. But the error you're seeing is happening because System isn't defined on the window. This will happen if you haven't loaded up System yet. You need to make sure that your index.html file loads up SystemJS first, then you load up your config file.
You can see in the skeleton project's index.html found here, that system.js is loaded before we bring in the configuration file. Here is an example of a proper index.html using SystemJS.
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<span>Loading...</span>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
As an alternative, the CLI helps get a skeleton project up quickly (it doesn't include a navigation example, it is a bare-bones skeleton). It uses RequireJS however, but we have plans to support other module loaders (such as SystemJS) down the road.
Issue updated. Please check the edit
I want to use the debugger included in Webstorm to run my project. I'm
using Angular2 and TypeScript. I need to place breakpoints into my typescript files.
Basically, my index.html just imports some .js files and starts my
app by calling a function named bootstrap defined in another .js file (transpiled from a .ts file !).
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title></title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="build/core/system.config.js"></script>
<script src="build/core/moduleLoader.js"></script>
<script src="build/core/bootstrap.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script>
bootstrap();
</script>
</head>
<body>
<app-view>Loading...</app-view>
</body>
</html>
bootstrap is defined as follow :
const bootstrap:()=>Promise<void>= async function() {
await ModuleLoader.loadAll();
System.import('core/app').then(null, console.error.bind(console));
};
window.bootstrap = bootstrap;
When I run my index.html in debug mode, an error is thrown,
bootstrap() is not defined.
When I run the app inside a browser, it works well. Have I missed some configuration ?
I've installed the jetbrains plugin (I'm using chrome) and configured the port. I can see the "Loading..." on my browser.
EDIT
Maybe a usefull information :
I'm using node. Into my main server-side script, I set up express and do some configuration. When I'm trying to debugging, my server is listening but on another port (8080). The debugger uses the port 63343.
You can start a JavaScript debug session for any URL - you just need to specify it in the JavaScript run configuration. If you app is running on localhost:8080, then use that URL in the JavaScript debug configuration.
Another important point: make sure you generate source maps when compiling your TypeScript code.
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.