My .ts file is not compiling to a .js file - javascript

I have a very simple app. Here is the file structure:
-myapp
-node_modules
-src
-app.ts
-package-lock.json
-package.json
-tsconfig.json
my tsconfig.json file:
{
"compilerOptions": {
"target": "ES6"
},
"include": ["src/**/*"]
}
my package.json file (note, the typescript compiler is installed as a dev dependency, not globally):
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^4.9.4"
}
}
my app.ts file:
let x:string
FYI- I'm using Sublime text as my text editor. And I'm doing the following in the bash shell on a MAC:
I'm trying to compile all of the .ts files in the src directory into .js files. However, in my bash shell when I cd to the root directory of myapp and run tsc I get: -bash: tsc: command not found

To run locally installed modules, you have to use npm scripts
Add this to scripts in package.json:
// any name you want
"compile": "tsc"
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"compile": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^4.9.4"
}
}
You can also use npx tsc, but it will not use the version installed

Related

Parcel Build throws the error [Error: Error opening directory]

I'm new at parcel and node packages and I'm tryng do deploy my projet to github pages using Parcel ad gh-pages. I created the following scrip at package.json
"build:parcel": "parcel build ./src/index.html"
the problem is when it finish building, throws the error [Error: Error opening directory]
✨ Built in 327ms
dist\index.html 3.04 KB 3.02s
dist\index.955ccd1a.css 183.28 KB 103ms
dist\index.3e71ab34.js 2.26 KB 190ms
dist\index.607dc078.js 173.57 KB 2.25s
[Error: Error opening directory]
sometimes, even when I run the script "start": "parcel ./src/index.html" parcel do not create the dist folder.
My full package.json:
{
"name": "herosacai",
"version": "1.0.0",
"homepage": "https://venifeitosa.github.io/herosacai/",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel ./src/index.html",
"build:parcel": "parcel build ./src/index.html",
"clear:wind": "rd /s/q dist",
"build": "npm run clear:wind && npm run build:parcel",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.2.0",
"jquery": "^3.6.0"
},
"devDependencies": {
"parcel": "^2.6.2"
}
}
I fixed this problem adding the parameter --no-cache at the parcel scripts
before:
"start": "parcel ./src/index.html"
"build:parcel": "parcel build ./src/index.html"
after:
"start": "parcel ./src/index.html --no-cache"
"build:parcel": "parcel build ./src/index.html --no-cache"

can't transpile relative path of threejs with browserify and babel

i'm new at babel and browserify, I have a problem with transpile with browserify and babel, i've installed the threejs package and add
import * as THREE from 'three'
it works fine when i transpiled using command below
browserify input.js > output.js -t babelify
but when i add another import
import {GLTFLoader} from '../node_modules/three/examples/jsm/loaders/GLTFLoader'
and i used that command again, it doesn't work and it says
'import' and 'export' may appear only with 'sourceType: module' (1:0)
i've also added type module in the package.json but it still doesn't work, here is my package.json
{
"name": "three.js",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"three": "^0.129.0"
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"babelify": "^10.0.0"
},
"type": "module"
}
also here is my babel.config.json
{
"presets": ["#babel/preset-env"]
}
is there anything i need to add or change?
Importing the examples from the js folder would work
import {GLTFLoader} from './node_modules/three/examples/js/loaders/GLTFLoader'
// or depending on your path
import {GLTFLoader} from '../node_modules/three/examples/js/loaders/GLTFLoader'
The files in the jsm folder imports from three.module.js

local host can not display output map create in javascript

This workshop document from openlayers
https://openlayers.org/workshop/en/basics/
contains an example. i am trying to get it running but despite both of
npm start
npm run build
run successfully, however when i access the localhost"please see the attached image"
http://localhost:3000/
OR
http://localhost:1234/
nothing is to be displayed.
please let me know how to solve this issue
package.json
{
"name": "app6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"ol": "^6.5.0"
},
"devDependencies": {
"parcel-bundler": "^1.12.5"
}
}
image
Don't stop the process.
npm start
Then let the server running (nicht abbrechen) and go to:
http://localhost:1234/
If you run:
npm run build
you have to copy the build folder to a server to have it run.

Webpack throws warning despite specifying mode

I am following a tutorial on webpack 4 where the person indicated that I do not need to specify a config file.
Here are my npm commands:
webpack --mode development
webpack --mode production
But yet i get the warning that no mode has been specified and thus production has been used my default.
May i know what is going on here?
This is my package.json:
{
"name": "Datum_GUI",
"version": "1.0.0",
"description": "Frontend for the DATUM portal",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "GTI Storage SAN CIE",
"license": "ISC",
"devDependencies": {
"webpack": "^4.34.0",
"webpack-cli": "^3.2.3"
}
}
The argument is malformed, is missing an =, should be webpack --mode=production or webpack --mode=development

'nodemon' is not recognized as an internal or external command, operable program or batch file

I'm trying to install nodemon globally, but I'm getting warning as mentioned in attached picture. May be because of warning, I'm not able to run nodemon.
My package.json
{
"name": "learn",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "himanshu",
"license": "ISC",
"dependencies": {
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.17.2",
"express": "^4.15.4",
"mongoose": "^4.11.7",
"morgan": "^1.8.2"
}
}
I have added C:\Users\username\AppData\Roaming\npm to the environment variables of my system and it solved my issue.

Categories