I am using browserify and want to specify all of the paths for browser specific javascript in an external file rather than have them all in package.json. How can I do this?
{
"name": "karma-browserify-example",
"version": "0.0.0",
"browser": {
"jquery": "./some/path/to/jquery.js"
},
"browserify-shim": "./external/file/path/with/shims"
}
In the example above I want to move browser object in package.json into a different file if possible. Can this be done?
Related
My top package.json:
{
"name": "foo",
"version": "0.0.0",
"private": true,
"workspaces": [
"apps/*",
"packages/*"
],
"devDependencies": {
"#foo/eslint-config": "*"
},
"engines": {
"npm": ">=7.0.0",
"node": ">=14.0.0"
},
"dependencies": {},
"packageManager": "npm#8.18.0"
}
and I have a package in packages/#foo/eslint-config.
However, when I do npm install, I get an error saying that #foo/eslint-config is not in the registry.
I am assuming that I have either wrong directory structure.
Figured it out.
The package should have gone directly to packages/eslint-config directory.
The package name still needs to have the scope, i.e. #foo/eslint-config.
It appears that workspaces do not use the same convention of nesting scoped packages under a sub-directory as node_modules do.
It also appears that the folder name has no significance, as long as it is directly in the directory defined in workspaces configuration and has the correct package name.
Alternatively, you can also just update your workspaces configuration to read from packages/#foo/*.
Background
I'm an absolute beginner in BuckleScript, and while I've downloaded packgages with npm before, I've never written a library.
Goal: installing my new package local package in my project using npm
I am trying to wrap some parts of the service worker api in JavaScript. I have started with a file bs-service-worker/src/ExtendableEvent.re like so
type _extendableEvent('a);
type extendableEvent_like('a) = Dom.event_like(_extendableEvent('a));
type extendableEvent = extendableEvent_like(Dom._baseClass);
[#bs.send] external waitUntil: (extendableEvent, Js.Promise.t('a)) => unit
= "waitUntil";
This compiles and produces ExtendableEvent.bs.js as expected.
Now, though, I'd like to go ahead and test what I have so far by creating a new npm project and importing what I have locally. I created a new sibling directory and did an npm install ../bs-service-worker. That succeeded, and then I did a sanity-check build on my new BuckleScript project. That also succeeded.
The issue: opening my module causes an error
When I add open ExtendableEvent; to Demo.re in the new project, I get the following error:
We've found a bug for you!
/home/el/workbench/bucklescript/bs-service-worker-examples/src/Demo.re 11:6-20
9 │
10 │ /**/
11 │ open ExtendableEvent;
12 │
13 │ /*
The module or file ExtendableEvent can't be found.
- If it's a third-party dependency:
- Did you list it in bsconfig.json?
- Did you run `bsb` instead of `bsb -make-world`
(latter builds third-parties)?
- Did you include the file's directory in bsconfig.json?
What I've tried
I'm guessing I'm misusing BuckleScript here instead of npm because npm is so widely adopted and well documented that I think I'd have found the problem, but I'm definitely not ruling out the possibility that I'm misusing npm, too.
I do have "bs-service-worker" listed as a bs-dependency. I also tried "../bs-service-worker" in case BuckleScript didn't like the virtual directory, but it didn't seem to help.
My npm run build command is indeed npx bsb -make-world.
More code:
bs-service-worker/bs-config.json
{
"name": "bs-service-worker",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true,
"public": "all"
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/bsconfig.json
{
"name": "bs-service-worker-examples",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
"bs-service-worker",
"bs-fetch",
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/package.json
{
"name": "bs-service-worker-examples",
"version": "0.0.1",
"scripts": {
"build": "npx bsb -make-world",
"start": "npx bsb -make-world -w",
"clean": "npx bsb -clean-world"
},
"keywords": [
"BuckleScript"
],
"author": "Eleanor (https://webbureaucrat.bitbucket.io)",
"license": "MIT",
"devDependencies": {
"bs-platform": "^7.3.2"
},
"dependencies": {
"bs-fetch": "^0.6.1",
"bs-service-worker": "file:../bs-service-worker"
}
}
Easy Reproduction of the Issue
The fastest way to reproduce this would be to fork this repository and try to add it as a local npm dependency.
The problem seems to be that you have "namespace": true in your library's bsconfig.json, which will wrap all the modules in a namespace module with a silly generated name based on the name field. In this case it will be BsServiceWorker I think.
You could just remove that setting, or set it to false, but namespacing is a good idea to avoid collisions between modules from different libraries, or your own app, so I would recommend setting it to a custom, sensible name. For example:
"namespace": "ServiceWorker"
You can then open ExtendableEvent in the consumer project with:
open ServiceWorker.ExtendableEvent;
For more details, see the documentation on the namespace field.
I have installed waypoints with using bower. I can see that there is a folder for shortcuts inside of its /lib folder, containing the shortcuts for infinite.js inview.js and sticky.js. My question is how I can actually access them in my project using bower.
I am using gulp to package all of my JavaScript for this project, so I am using "main-bower-files" to compile all of the library javascript files into a single file.
I have modified the bower.json so that waypoints will use the jquery version by doing the following
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": "lib/jquery.waypoints.js"
}
}
But I do not know how I can include the /shortcuts/inview.js using this method. Is it possible to use npm or bower to get access to these files?
Should be able to just add it to "main" I would think:
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": [
"lib/jquery.waypoints.js",
"lib/shortcuts/sticky.js"
]
}
}
Are there any established patterns for running less via npm scripts?
for instance, in my package.json file I have:
{
"name": "lesstest",
"description": "less test",
"main": "dist/index.js",
"scripts": {
"build:css": "./node_modules/less/bin/lessc src/less/app.less dist/style.css"
},
"devDependencies": {
"less": "^2.6.0",
}
}
running:
./node_modules/less/bin/lessc src/less/app.less dist/style.css
from terminal works just fine, but when I run
npm run build:css
I get " '.' is not recognized as an internal or external command,
operable program or batch file. " Does this mean that commands in npm scripts cannot include paths? If so, are there any techniques out there to execute a similar intention without using gulp?
You can just use "lessc src/less/app.less dist/style.css"
By default, package.json looks in your node_modules folder, and if it can't find it, looks elsewhere, so you can safely use a downloaded dependency as if you had globally installed it.
I just want to clarify #JRJurman's answer a bit. You can use lessc like this:
{
"name": "lesstest",
"description": "less test",
"scripts": {
"build:css": "lessc src/less/app.less > dist/style.css"
},
"devDependencies": {
"less": "^3.0.0",
}
}
As a more comprehensive pattern for less in npm: You often need to also integrate less file dependencies. The package.json would look like this:
{
"name": "lesstest",
"description": "less test",
"scripts": {
"build:css": "lessc src/less/app.less > dist/style.css"
},
"devDependencies": {
"less": "^3.0.0",
},
"dependencies": {
"#foo/bar": "^1.0.0"
}
}
and in your local baz.less file you would refer to the dependency like this:
#import "#foo/bar/src/a-less-file";
#foo refers to the respective folder within your node_modules
folder and bar/src are the nested folders.
a-less-file refers
to a-less-file.less within your node_modules/#foo/bar/src
I wrote a small app in node webkit, and am having trouble packaging it. My eventual goal is to have a .exe that I can give to other people.
I can run it from the command line with "nodewebkit".
I've tried zipping the files and saving the result as app.nw, but when I try to run that I just get the default node webkit screen. I've read through the docs on rogerwang github, but haven't gotten anywhere because I can't get through that first step.
The app consists of a few files: index.html, main.js, styles.css. It depends on a few node modules as well as jquery. The package.json file is pasted below... any suggestions would be much appreciated.
{
"name": "spl",
"version": "0.0.0",
"description": "",
"keywords": [],
"main": "index.html",
"homepage": "https://github.com/lpappone/spl",
"bugs": "https://github.com/lpappone/spl/issues",
"window": {
"title": "Splitter",
"toolbar": false,
"frame": true,
"width": 800,
"height": 500
},
"author": {
"name": "Lauren Pappone",
"email": "",
"url": "https://github.com/lpappone"
},
"repository": {
"type": "git",
"url": "git://github.com/lpappone/spl.git"
},
"dependencies": {
"fast-csv": "^0.5.3",
"recursive-readdir": "^1.2.0"
},
"devDependencies": {},
"engines": {
"node": ">=0.8.0"
}
}
The directory structure looks like this, and when I inspect the contents of the .nw, it is exactly the same:
You seem to be doing this on a Mac, so I'll cover that. Windows and Linux are slightly more complicated because they don't have App Bundles the way Mac OSX does.
Are you copying your app.nw to the right place? Are you sure you're including everything in app.nw?
Is this what you're doing?:
First you need to create app.nw, which is just a zip file of your entire project. If you go to your project dir (the one containing package.json) you can do this by typing
zip -r ../app.nw .
Now create a copy of node-webkit.app and copy app.nw into node-webkit.app/Contents/Resources/
cp app.nw node-webkit.app/Contents/Resources/
You should be able to run node-webkit.app now and it should run your app. (You might have some issues with security settings and such)
See https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps#mac-os-x for further details.