I have a library in folder common with package.json:
{
"name": "common",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
I have another project that uses this library, in folder article with package.json:
{
"name": "article",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
}
Locally I did:
cd common
yarn link
cd ../article
yarn link common
This works fine I locally publish library and use it.
Now I want to deploy this project to CI, and I don't know how to make it work in another computer. Do I have to run this as a script, or is there a better way to use a local library.
If you don't want to create a module, you would want to get the code out to someplace like a repository so other env can access it. Perhaps try using it from git hub using the method from this article:
https://medium.com/pravin-lolage/how-to-use-your-own-package-from-git-repository-as-a-node-module-8b543c13957e
There is something called Yarn Workspaces: https://classic.yarnpkg.com/en/docs/workspaces/.
Basically in the root of your project you create a package.json file and add these properties in:
{
"workspaces": [
"common",
"article"
]
}
and run yarn install and now you can use these local libraries within your other projects.
Related
I need how coonect SciChart to Nuxt.js
i did
npm init nuxt-app "scichart"
npm install scichart
and i catch error
packeg.json
{
"name": "scichart",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"buildsci": "webpack",
"startsci": "webpack-dev-server"
},
"dependencies": {
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"scichart": "^2.0.0"
},
"devDependencies": {
"copy-webpack-plugin": "^6.3.2",
"webpack": "^4.46.0 ",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
There are now a number of samples on the SciChart.js Github showing how to setup SciChart in frameworks. These include:
Next.js
Nuxt.js
React
Vue.js
Blazor
Angular
Just Javascript (no framework)
Plus many more. The common problem with these frameworks is loading WebAssembly. SciChart.js uses WebAssembly to achieve really high performance 2D & 3D charts & graphs. Wasm file needs to be in the output folder when your project is built. This is different for every framework.
There is now a page on the SciChart.js Documentation showing how to load webassembly flawlessly without requiring Webpack or Copy plugins in package.json.
See the how-to article here: Creating a new SciChartSurface and loading Wasm
Deploying Wasm (WebAssembly) and Data Files with your app
If you receive an error message when running your app, you may not
have deployed the Wasm (WebAssembly) or data files correctly. Below
are some steps on how to resolve that.
Error: Could not load SciChart WebAssembly module. Check your build
process and ensure that your scichart2d.wasm, scichart2d.data and
scichart2d.js files are from the same version
Option 1: Package Wasm & Data Files with WebPack (or similar)
...
Option 2: Load Wasm from URL with SciChartSurface.configure() or
useWasmFromCDN()
...
We've packaged a helpful function that
automatically loads the latest & correct version of SciChart's Wasm &
Data files from CDN.
To use this, instead of calling
SciChartSurface.configure() passing in a URL, call
SciChartSurface.useWasmFromCDN().
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
export async function initSciChart() {
// Call this once before any SciChartSurface is shown.
// This is equivalent to calling SciChartSurface.configure() with the CDN URL (JSDelivr)
SciChartSurface.useWasmFromCDN();
}
Context :
I'm trying to use Editor.js library for a personal project
Editor.js documentation
There is the project directory :
There is the package.json :
{
"name": "quicknoteapp",
"version": "1.0.0",
"description": "",
"main": "myApp.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"#editorjs/editorjs": "^2.19.0",
"electron": "^10.1.5",
"menubar": "^9.0.1"
}
}
My index.html :
<script type="module" src="main.js"></script>
And I import my library from main.js :
import EditorJS from '#editorjs/editorjs';
Finally, the console come up with this error :
TypeError: Module specifier, '#editorjs/editorjs' does not start with "/", "./", or "../". Referenced from file:///Users/charles/Desktop/QuickNoteApp/main.js
Ok, I need to add the relative path when I import the module. But I don't like to do it.
Why I need to use a relative path to an installed library ?
Why I can't do the same as the documentation? What I'm doing wrong during the project set up ? I don't think this is normal to add the path to each script. If not, why using npm... and got a node_module folder.
NPM is designed to manage packages for Node.js not for web browsers.
Web browsers are not Node.js. They do not support Node.js' module path resolution features (which involve searching multiple directories for matching files: Web browsers do not have access to directory listings, only to URLs).
The instructions assume you are using a tool like Webpack which uses Node.js to bundle JS modules into a single file for delivery to a browser. They don't assume you are going to load the modules into the browser directly.
I've created a simple webpack 4 demo-project which doesn't have any configuration. I added a simple index.js that just prints out a simple line and all works well. A 900 byte main.js is generated as expected.
However, when i require the 24kb library 'sjcl' (has 0 dependencies) and then execute the build, a 400kb file is generated. I've used an analyzer to Any ideas onto what is going on?
It's like webpack is importing a ton of dependencies to handle this library. How can i mitigate this?
index.js
require("sjcl");
console.log("hello world");
package.json
{
"name": "js-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"sjcl": "1.0.7"
},
"devDependencies": {
"webpack": "4.16.5",
"webpack-cli": "3.1.0"
}
}
WARNING in asset size limit: The following asset(s) exceed the
recommended size limit (244 KiB). This can impact web performance.
Assets: main.js (323 KiB)
Below is my analyzer:
https://pastebin.com/iguWmmaS
Looks like webpack adds a browser compatible version of the node crypto module to the bundle, thus significantly increasing the size. To prevent Webpack from doing this, you can use the below option for webpack to ignore the library.
module: {
noParse: [
/sjcl\.js$/,
]
}
I built an npm module named emeraldfw and published it. My package.json file is
{
"name": "emeraldfw",
"version": "0.6.0",
"bin": "./emeraldfw.js",
"description": "Emerald Framework is a language-agnostig web development framework, designed to make developer's lives easier and fun while coding.",
"main": "emeraldfw.js",
"directories": {
"example": "examples",
"test": "test"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/EdDeAlmeidaJr/emeraldfw.git"
},
"keywords": [
"web",
"development",
"framework",
"language",
"agnostic",
"react"
],
"author": "Ed de Almeida",
"license": "MIT",
"bugs": {
"url": "https://github.com/EdDeAlmeidaJr/emeraldfw/issues"
},
"homepage": "https://github.com/EdDeAlmeidaJr/emeraldfw#readme",
"devDependencies": {
"jshint": "^2.9.4",
"mocha": "^3.3.0"
},
"dependencies": {
"jsonfile": "^3.0.0",
"react": "^15.5.4",
"vorpal": "^1.12.0"
}
}
As you may see, I declared a "bin": "./emeraldfw.js" binary, which corresponds to the application itself. The package.json documentations says this is going to create a link to the application executable at node.js bin/ directory. This worked fine, but when I install it globally (npm install emeraldfw -g) and then run it from the command line I receive an error messsage
All other node modules are working fine and my application is passing in all tests and when I run it directly inside the development directory (with node emeraldfw.js) it works really fine.
I'm not a node.js expert and after having fought this error for two days, here I am to ask for help.
Any ideas?
EDIT:
I checked the permissions for my node binary (emeraldfw.js) and it belongs to edvaldo:edvaldo, my user and group. And it is with executable permissions set. I should have no permission issues inside my own area with these settings, don't you think?
Well, shebang issue here.
Before creating npm modules, you need read every single line of it's documentation.
As it stated here you need to use shebang to let your operating system know that it should run with node instead of operating system's own script execution hosts.
Please make sure that your file(s) referenced in bin starts with
#!/usr/bin/env node, otherwise the scripts are started without the node executable!
So, by using shebang on an npm module, you tell the os to create platform specific executables which let it use node to run the script. A .cmd file on Windows for example.
Have you try to install as su?
I have a node.js + Express + express-handlebars app deployed on Heroku. When running the app the console shows that the jquery file was not found (404) error. This creates a cascading effect and resulting dependant libraries like Bootstrap, Datatables etc fail.
The following is my package.json file
{
"name": "test-node",
"version": "0.0.1",
"description": "Test node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/username/repo.git"
},
"author": "Neeraj Jadhav",
"license": "ISC",
"bugs": {
"url": "https://github.com/username/repo/issues"
},
"homepage": "https://github.com/username/repo",
"dependencies": {
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.15.0",
"cookie-parser": "^1.4.1",
"express": "^4.13.4",
"express-handlebars": "^3.0.0",
"express-session": "^1.13.0",
"method-override": "^2.3.5",
"moment": "^2.12.0",
"mysql": "^2.10.2",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"sendgrid": "^2.0.0",
"serve-favicon": "^2.3.0",
"shortid": "^2.2.4"
},
"engines": {
"node": "0.10.28",
"npm": "1.4.9"
}
}
The following is the screenshot of my node js project folder structure.
It is unable to find the jquery-1.12.1.min.js
In my app.js I moved the line of code referencing the static files above everyone else, but it still does not work. If I open the jquery Heroku link in a new tab and add public before js, like this: https://admin-violet.herokuapp.com/public/js/jQuery-1.12.1.min.js , it shows the same error.
Any idea on why it is unable to find the jquery file? I have deployed node js projects on Heroku before but never faced this issue.
Appreciate the help.
You need to use lowercase letters for heroku and node, note the error is looking for jQuery, just point it to jquery and you should be good.
Relevant Docs:
Heroku Docs
Some languages encourage filenames that match class names, like MyClass and ‘MyClass.js’. Don’t do that in node. Instead, use lowercase files:
let MyClass = require('my-class');
Node.js is the rare example of a Linux-centric tool with great cross-platform support. While OSX and Windows will treat ‘myclass.js’ and ‘MyClass.js’ equivalently, Linux won’t. To write code that’s portable between platforms, you’ll need to exactly match require statements, including capitalization.
The easy way to get this right is to just stick with lowercase filenames for everything, eg ‘my-class.js’.
In your command line tool - try to restart the Heroku server. heroku restart or try to read the logs heroku logs -t the "-t" is a flag for tail will show you where it errors out on the server side within Heroku.