I followed NW.js' offical doc, but the window never appears.
If I switch package.json to "main": "index.html", window appears. but if I return to "main": "main.js", window doesn't appear.
This is my main.js:
var nw = require('nwjs');
nw.Window.open("index.html", {}, function(win) {});
I have to set "main": "main.js" because a module I want to use doesn't support .html file as "main".
Does anyone have a solution?
I'd be curious what module requires your main to be a JS file. It's pretty rare that you'd have an NW.js project that doesn't use an html file as the main (I strongly recommend using "main": "index.html").
Your problem is that var nw = require('nwjs'); is equivalent to doing nw = undefined. window.nw and global.nw are both already accessible at all times in the default context. You are basically deleting the thing you need.
index.html
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<h1>Test<h1>
</body>
</html>
index.js
nw.Window.open('index.html');
package.json
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nw ."
},
"devDependencies": {
"nw": "0.51.0-sdk"
},
"author": "Julien",
"description": "Test",
"license": "MIT"
}
Then just npm install && npm start. But again, you don't want this, you want "main": "index.html", it's just a lot less trouble.
Related
I'm trying to a create an internal library for work.
All seems to be fine until I attempt to use in another project.
The file extension in all of the import statements seems to have been removed during the npm pack phase.
In other words, the statement:
import * as Account from './modules/account.js'
becomes:
import * as Account from './modules/account'
This causes the import to fail.
I originally thought this may have been because I used the .js extension instead of .mjs, but switching to .mjs yields the same results.
main.js
import * as Account from './modules/account.js'
Account.secretSquirrel().then( data => console.log( 'inspector gadget', data ) );
node version
v16.15.0
package.json (sensitive info redacted)
{
"name": "#Nunya",
"version": "0.0.0",
"description": "Nunya",
"private": true,
"main": "./lib/main.js",
"scripts": {
"build": "npm run pack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "Nunya.git"
},
"author": "Nunya",
"license": "ISC",
"type": "module",
"exports": {
".": {
"require": "./lib/main.js",
"default": "./lib/main.js"
},
"./Account": "./lib/modules/account.js"
}
}
As far as I can tell, this shouldn't be happening. Not sure how to resolve
Evidently, adding an import object defining the resolutions for the relative paths to package.json resolves this issue. Although, I'm certain there's a non-manual way to accomplish this, it is unbeknownst to me at this time.
If anyone knows, please let me know
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 **
[Build Error in parcel # 2.7.0 start when I am trying to add external index.html file in the main I also ignored the main but it also doesn't work for me. Will please someone help me to solve this problem It also not working with JavaScript file when I added externally and also getting error with html file but I want to add the html file but as a solution I try to add JavaScript file but it also doesn't work for me. Will please someone solve this issue or tell me how to solve this issue
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "unrelated.js",
"targets": {
"main": false
},
"scripts": {
"start": "parcel start index.html",
"build": "parcel build index.html"
},
"author": "Meelad Sultan",
"license": "ISC",
"devDependencies": {
"parcel": "^2.7.0"
}
}
enter code here
At last I can find the solution of my problem after almost a day if someone else facing the same problem they just do add the **Browsers list ** in the package.json file before script and ignore the main target and also set the parcel to latest then the parcel will run successfully and do not give any server error or build error. And don't forget to run periodically npx browerlist#latest --update-db. It will update your package-lock file with new caniuse-lite version. In this case, you will be sure that last two version or > 0.2% will target what you expect
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "unrelated.js",
"target": {
"main": false
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"start": "parcel index.html "
},
"author": "Meelad Sultan",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"parcel": "latest"
},
"dependencies": {
"sass": "^1.55.0"
}
}
I'm trying to set up a simple webpack JavaScript starter project with the absolute bare minimum to play with vanilla JavaScript. When I build the project, everything works fine. But if I try to run the project with webpack-dev-server, nothing updates when making changes.
This setup does not use a webpack.config.js file.
Does webpack-dev-server require a config file to make this function properly?
package.json
{
"name": "javascript-starter-project",
"version": "0.0.1",
"description": "A simple boilerplate JavaScript starter project.",
"license": "MIT",
"author": "...",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --inline --open --port 8080"
},
"dependencies": {
"webpack": "^4.36.1"
},
"devDependencies": {
"prettier": "^1.18.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Starter Project</title>
</head>
<body>
<button id="button">Click me!</button>
<div id="output"></div>
<script src="dist/main.js"></script>
</body>
</html>
src/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello!~";
});
Now if I build this, clicking the button produces the "Hello!~" text as expected.
When I run npm start which uses webpack-dev-server, the same behavior happens. But when I make any changes ("Hello!~" edited to "Hello World!~"):
src/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello World!~";
});
... and refresh the page running at http://localhost:8080/ the changes are not reflected.
What am I missing? Do I need a webpack.config.js file to make this work?
EDIT:
The working setup now looks like this:
package.json
{
"name": "javascript-starter-project",
"version": "0.0.1",
"description": "A simple boilerplate JavaScript starter project.",
"license": "MIT",
"author": "...",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open --port 8080"
},
"dependencies": {
"webpack": "^4.36.1"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.18.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Starter Project</title>
</head>
<body>
<button id="button">Click me!</button>
<div id="output"></div>
</body>
</html>
src/index.js
const button = document.getElementById("button");
const output = document.getElementById("output");
button.addEventListener("click", () => {
output.innerText = "Hello!~";
});
Now, when I npm start and edit src/index.js, the changes are picked up! I was hoping there would be even less complexity than this, but this is pretty sparse so I'll take it.
The problem is the presence of <script src="dist/main.js"></script> in your index.html file. When you hit npm start or npm run start, webpack-dev-server spins up correctly. It serves the index.html and main.js file accordingly.
The webpack-dev-server has two jobs: In-memory bundling of assets and live-reloading. In-memory is required to support live reloading.
The problem happens when you make changes to index.js. Webpack indeed detects the changes, it builds but doesn't really emit bundled file back to the disk. It is built in-memory. In your case, since you have hardcoded the dist/main.js in your index.html, new main.js is not generated and you do not see the change on page refresh.
The quickest thing you can do is to run build script with watch mode. So use the following npm script in another terminal: "build": "webpack --watch". Now, on every save, the build would be generated and you can see the changes on refresh.
But this defeats the purpose of use webpack-dev-server. If this is the path, you wish to take then use something simple like http-server.
To fully harness the power of dev-server with live reloading, HMR, im-memory bundling, you would need a proper webpack.config.js file. Also, you must use html-webpack-plugin to generate index.html file so that live-reloading can work.
I am trying to learn Vue.JS, and the component I have made is not rendering on the page. This is my component:
import Vue from 'vue'
const card = new Vue({
el: '#card',
data: {
title: 'Dinosaurs',
content: '<strong>Dinosaurs</strong> are a diverse group of animals
from the clade <em>Dinosauria</em> that first appeared at the Triassic
period.'
}
})
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Practice</title>
</head>
<body>
<div id="card">
<header>{{ title }}</header>
<div v-html="content"></div>
</div>
<script src="bundle.js"></script>
</body>
</html>
And this is package.json (I realize most of the dependencies belong in devDependencies):
{
"name": "vue-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "browserify -t babelify -t vueify -e main.js >
bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babelify": "^7.3.0",
"browserify": "^14.4.0",
"vue": "^2.4.2",
"vueify": "^9.4.1"
},
"devDependencies": {}
}
When I load index.html in the browser, all it renders is {{ title }} and I am receiving no errors. Any explanation as to why this is happening would be appreciated!
vueify only transforms *.vue files, if you are going to use templating in your index.html then you need Vue compiler in order to compile the template in the browser (https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only).
A good way to have things like that covered is to use a vuejs-template, if you are using Browserify there is one: https://github.com/vuejs-templates/browserify
But as you have almost everything up, you can only add what's missing for the compiler package, as stated in "Runtime + Compiler vs. Runtime-only" - "Browserify" section in Vue guide.
Add to your package.json:
{
"browser": {
"vue": "vue/dist/vue.common.js"
},
}
That will tell Browserify to use the full (also called standalone) Vue build on browser.
Another way is to not use templates in index.html but instead in a main component, like App.vue, for that you check out the template I linked above, it does it out of the box.