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.
Related
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 **
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.
Following the Stencil docs here, I created some global CSS variables in src/global/variables.css. This is currently the only CSS file in this directory.
I’m trying to use my component(s) in React. The components / CSS variables work perfectly fine when developing in the Stencil project and when I copy the www/build/ directory to a vanilla JS / HTML project but not when I import and use them in React. The components work and clearly render but the CSS in the global/ directory clearly doesn’t get rendered.
Defining and using CSS variables within the component CSS files works, but not the global CSS files.
I’m guessing something is wrong with how I’m building it but I don’t know what I’m doing wrong.
I've tried updating to the most recent Stencil version and updated all other packages.
I've also tried adding:
styleUrls: [
"local-component.css",
"../../global/variables.css"
]
but this also did not work.
It only works if add a CSS tag referencing the UNPKG CDN like so:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds-poc#0.0.9/dist/poc/poc.css"/>
but fails if I try to do a local path like this:
<link rel="stylesheet" type="text/css" href="../node_modules/uwe-ds-poc/dist/poc/poc.css"/>.
Is this the only / best approach or is there something I am missing?
This is my stencil.config.ts:
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'poc',
globalStyle: 'src/global/variables.css',
outputTargets: [
{
type: 'dist',
esmLoaderPath: 'loader'
},
{
type: 'docs-readme'
},
{
type: 'www',
serviceWorker: null // disable service workers
}
],
copy: [
{ src: 'global' }
]
};
The copy property copies the global dir across to dist/collection/. This doesn't resolve the problem either.
This is my package.json:
{
"name": "uwe-ds-poc",
"version": "0.0.9",
"description": "Stencil Component Starter",
"main": "dist/index.js",
"module": "dist/index.mjs",
"es2015": "dist/esm/index.mjs",
"es2017": "dist/esm/index.mjs",
"types": "dist/types/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
"collection:main": "dist/collection/index.js",
"unpkg": "dist/poc/poc.js",
"files": [
"dist/",
"loader/"
],
"scripts": {
"build": "stencil build --docs",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate"
},
"devDependencies": {
"#stencil/core": "^1.8.1",
"#types/jest": "^24.0.23",
"#types/puppeteer": "1.20.2",
"jest": "^24.9.0",
"jest-cli": "24.8.0",
"puppeteer": "1.20.0"
},
"license": "MIT"
}
This entire Stencil project is here.
Thanks in advance.
Importing the unpkg cdn is a valid option.
However if you are using a bundler (webpack, parcel, etc.) you could just import your css with something like import 'my-package/dist/path/to/global.css'.
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'm trying to write a test automation script using appium, jasmine, and perfecto mobile. I'm using the project cloned from the following URL with my own configuration Appium Javascript Example
The problem is when I execute the npm test command I get the following error
node_modules is not recognized as an internal or external command
This is how the packages.json script looks like:
{
"name": "perfecto_appium_sample",
"version": "1.0.0",
"description": "The following sample shows how to Install an application and use WebDriverIO to automate and test it.<br/> It uses selendroid test application which can be downloaded from [here](https://github.com/PerfectoCode/AppsForSamples/tree/master/selendroid-test-app-0.17.0).",
"main": "perfectoSpec.js",
"scripts": {
"test": "node_modules/webdriverio/bin/wdio wdio.conf.js",
"start": "wdio wdio.conf.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"wdio": "^0.3.3",
"wdio-jasmine-framework": "^0.2.19",
"wdio-mocha-framework": "^0.5.12"
},
"dependencies": {
"wd": "^1.5.0",
"webdriverio": "^4.10.2"
},
"keywords": []
}
you need to provide relative path properly:
"scripts": {
"test": "node ./node_modules/webdriverio/bin/wdio wdio.conf.js",
"start": "wdio wdio.conf.js"
}
Just remove the paths "node_modules/webdriverio/bin/" and simply specify "wdio wdio.conf.js". It should work.