Develop Reference

Cannot Import My NPM Package With ES6 Import/Export Syntax

I am creating an NPM package called notifman. Here's what I did:
Created the package.json:
{
"name": "notifman",
"version": "1.0.5",
"description": "Advanced, Lightweight and Powerful Notification Library For Plain JS",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": "npx nodemon index.js"
},
"keywords": [
"notification",
"frontend",
"js",
"plain"
],
"author": "...",
"license": "MIT",
"dependencies": {
"notifman": "^1.0.3"
},
"devDependencies": {
"nodemon": "^2.0.20"
}
}
I wrote the index.js:
console.log("hello world");
Wrote a README.md
Tested the package in Node.js and it worked fine.
Originally, I wanted the package to work in the browser, so I tried changing the code in index.js to:
export default function getRoot() {
return document.getElementById("root");
}
Then, I wanted to test using import/export syntax, I suppose it is:
import getRoot from "notifman";
getRoot.textContent = "hello world";
The error message is:
Uncaught TypeError: Failed to resolve module specifier "notifman". Relative references must start with either "/", "./", or "../".
Partially Solved:
I just used Webpack, and it worked fine. But I am sure Webpack is not required. I want it to work WITHOUT webpack. This is why this is partially solved.

"type": "module"
**add this to your package.json just below main **

Editing package.js file

i'm having a hard time to understand how to run all of my .js files using package.js files
i have almost 2000.js scripts i need to run them one by one, i'm using a api made by gameflip
in the folder i found package.js, but i don't know how to use it ,
can anyone tell me how to do that ? thank you
here the script :
{
"name": "gfapi",
"version": "0.1.1",
"description": "Gameflip API",
"keywords": "Gameflip",
"homepage": "https://github.com/iJJi/gfapi",
"bugs": "https://github.com/iJJi/gfapi/issues",
"author": {
"name": "Eng-Shien Wu",
"email": "engshien.wu#ijji.com"
},
"license": "MIT",
"private": true,
"files": [
"index.js"
],
"repository": "iJJi/gfapi",
"engines": {
"node": ">=8.5.0"
},
"scripts": {
"bulk_listing": "node src/samples/bulk_listing.js",
"test": "ENVIRONMENT=mocha mocha src/test --recursive",
"docs": "jsdoc -c jsdoc_conf.js -d docs -P package.json index.js; docco -o docs/samples src/samples/*.js src/samples/*.rb"
},
"dependencies": {
"base-64": "^0.1.0",
"bluebird": "^3.5.0",
"bunyan": "^1.8.12",
"file-type": "^8.1.0",
"http-errors": "^1.6.2",
"node-rest-client-promise": "^3.1.1",
"promise-ratelimit": "^0.0.3",
"request": "^2.85.0",
"request-promise": "^4.2.2",
"speakeasy": "^2.0.0"
},
"devDependencies": {
"marked": "^0.3.19",
"docco": "^0.7.0",``
"jsdoc": "^3.5.5"
}
}

What you posted isn't a package.js (I don't even know if it exists), but a package.json. It's generated by NPM, the Node Package Manager. It's a list of all the project's dependencies. I think that what you're looking for are the npm scripts, they are in the script object of package.json.
npm run <script>
# For example :
npm run bulk_listing
npm run test
npm run docs
Each script will run its associated command in this package.json.
npm run bulk_listing
# Will do the same thing as:
node src/samples/bulk_listing.js
More about package.json.
The script I talked about below
If you want to run all the scripts, this should do the job :
const fileNames = ["path/to/fileA", "fileB"]; // I assume you have something to get all the files path. Isn't that npm run bulk_listing ?
fileNames.forEach(async (path, index) => {
// It's pretty much like 'node <path>'
await require(path);
// All the code here is executed AFTER the script has been launched
console.log(`LAUNCHED ${index} | ${path}`)
});

Regular expression to match a module in a package.json content

I'm trying to dynamically add and remove modules from a package.json file programmatically. To achieve this, I need a regular expression that can match a particular module in the devDependencies or dependencies.
Here is what I've tried
const packageJsonContent = "my package.json content read from a file";
const moduleName = "babel"; //an example module to be removed from `packageJsonContent`
let moduleRegex = new RegExp('"\\s*'+moduleName+'\\s*"\\s*:\\s*".*"(\s*,)?'); //<-- I need help here
//remove module
packageJsonContent.replace(moduleRegex, "");
The issue with my approach is that; if there's any key out of the devDependencies or dependencies section but has the same name as the moduleName, the regular expression will match it.
My request
I need a regular expression that will match a given module found under the dependencies or devDependencies sections of a package.json file. Thanks

Consider parsing the JSON instead, and delete the [moduleName] property from the dependencies and devDependencies objects, rather than using a convoluted regular expression:
const moduleName = "babel";
const packageJSONStr = `{
"name": "somename",
"scripts": {
"build": "tslint src/**/*.ts && webpack"
},
"author": "bob",
"dependencies": {
"foo": "^1.2.3"
},
"devDependencies": {
"babel": "^1.2.3",
"ts-loader": "^6.2.1",
"typescript": "^3.6.3",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9"
}
}`;
const packageJSON = JSON.parse(packageJSONStr);
delete packageJSON.dependencies[moduleName];
delete packageJSON.devDependencies[moduleName];
console.log(packageJSON);

You can find your dependencies and devDependencies sections first, then remove your desired modules from them, then replace your new dependencies or devDependencies in the package.json file.

Bower throws jquery "not injected" warning after running grunt serve

I've recently had to clone an project and rebuild bower packages. jQuery has updated I believe, and is now throwning an warning:
Warning:
Please go take a look in "app/bower_components/jquery"
for the file you need, then manually include it in your file.
I've done this. And everythign works properly. However, everytime I grunt serve the warning still gets thrown?
jquery was not injected in your file.
How do I remove this error? and will this error out a grunt build? I'm sure the warning is harmless but it's really upsetting to keep seeing it.
main .bower.json
{
"name": "jordan",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"angular-resource": "1.2.6",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6",
"angular-route": "1.2.6",
"jquery-ui": "~1.10.3"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
.bower.json for jquery
{
"name": "jquery",
"version": "2.1.0",
"ignore": [
"**/.*",
"build",
"speed",
"test",
"*.md",
"AUTHORS.txt",
"Gruntfile.js",
"package.json",
"bower.json"
],
"dependencies": {
"sizzle": "1.10.16"
},
"devDependencies": {
"requirejs": "~2.1.8",
"qunit": "~1.12.0",
"sinon": "~1.7.3"
},
"keywords": [
"jquery",
"javascript",
"library"
],
"homepage": "https://github.com/jquery/jquery",
"_release": "2.1.0",
"_resolution": {
"type": "version",
"tag": "2.1.0",
"commit": "cac43f3ef791b7e68c1917a734fb92e04450c111"
},
"_source": "git://github.com/jquery/jquery.git",
"_target": ">=1.6",
"_originalSource": "jquery"
}

You can workaround this problem changing the bower.json of your project and override some package with problem
"overrides": {
"jquery": {
"main": "./dist/jquery.js"
}
}
You can sse more about that in https://github.com/bower/bower/issues/585
But, looks like that current version of the JQuery is playing into the Bower rules.

As explained on the related Github issues available here:
https://github.com/stephenplusplus/grunt-bower-install/issues/55
This isn't an error with grunt-bower-install - this is, sadly, jQuery not playing by Bower's rules. It's not possible for this tool to work with a Bower package that doesn't specify main property. Like any other package that doesn't, the solution is to manually include the reference to the file inside of your HTML file, like the good ol' days
I'm sorry man, I had the same problem just now :(

In general, if you get this error it is because the author of whatever bower component you are using either hasn't included a bower.json file in the component or hasn't define a "main" property in the bower.json folder. If the component is being actively maintained, you should open a github issue asking for a proper bower.json file in the component. Here is an real world example...
https://github.com/CreateJS/SoundJS/issues/76

Globally-installed NodeJS npm module does not execute the main/bin JavaScript file with node

I've a package.json like this:
{
"name": "some-module",
"version": "1.0.0",
"bin": "./bin/some-module.js",
"main": "./bin/some-module.js",
"description": "Some module description",
"homepage": "http://my.home.page.com",
"author": {
"name": "Matias Fidemraizer",
"email": "no-email#no-email.com",
"url": "http://some.url.com"
},
"engines": {
"node": ">=0.4.0"
},
"keywords": [
"somekeyword"
],
"license": {
"type": "Apache v2",
"url": "http://www.apache.org/licenses/LICENSE-2.0.html"
},
"preferGlobal": true,
"repository": {
"type": "git",
"url": "git://github.com/some/repo"
},
"dependencies": {
"somedependency": "*"
}
}
When I try to install the whole module typing npm -g install /path/to/module/folder, npm creates a .cmd file on AppData folder in the default node_modules location for global installations as expected.
But generated code doesn't include node.exe or node:
"%~dp0\node_modules\some-module\bin\some-module.js" %*
... so when I try to execute my some-module module in CMD, PowerShell or whatever, it's executed using Windows Script Host (WSH).
For that reason I thought comparing package.json of some existing module like YUIDocJS would be enough to find out what's causing this problem but I can't figure out what's wrong in my own package.json so it doesn't create the expected global installation.
Thank you in advance for your effort.

Do you have the shebang #!/usr/bin/env node at the top of the file referenced in the bin property of your package.json? Even though the shebang is a *nix specific directive, npm depends on its presence to create the shim for the .cmd