Here is my webpack.config.js
module.exports = {
entry: "./src/index.js",//path relative to this file
output: {
filename: "../frontEnd/bundle.js",//path relative to this file
},
externals: {
puppeteer: 'require("puppeteer")',
},
mode: 'development'
}
Here is the file, index.js, where the webpack is ran:
var backendScript = require('../backEnd/backend');
var safeBackendScript = require('../backEnd/safeBackend');
function test(){
document.getElementById("Fname").value= "John"
document.getElementById("Lname").value= "Smith"
document.getElementById("Phone").value= "1234567890"
document.getElementById("Email").value= "Jsmith#domain.com"
document.getElementById("Saddress").value= "123 Main Street"
document.getElementById("Zip").value= "12345"
document.getElementById("country").value= "USA"
document.getElementById("state").value= "NJ"
document.getElementById("cardtype").value= "AE"
document.getElementById("Cname").value= "JOHN H SMTIH"
document.getElementById("Cnumber").value= "1234567890101112"
document.getElementById("CVV").value= "123"
document.getElementById("cardmonth").value= "01"
document.getElementById("cardyear").value= "2035"
document.getElementById("category").value= "jackets"
document.getElementById("kword").value= "Supreme Jacket"
document.getElementById("delay").value= "120"
document.getElementById("color").value= "C2"
document.getElementById("size").value= "L"
}
module.exports = {
test: test
}
And then here is my html with the function ran:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type= "text/javascript" src="./bundle.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Supreme Bot</title>
</head>
<body style="margin: 20px">
<button onclick="test()"> test </button>
</body>
</html>
then after clicking on the button, it states that test() is undefined...
I can't figure it out...
Any help is GREATLY appreciated.
You aren't exporting test() to window.
module.exports = {...} won't automagically get injected into window, but:
you can set the output.libraryTarget: 'window' and output.library: 'something' configuration options and get window.something.test() (docs here), or
you can manually do window.test = test; at the end of your Webpack entry point instead of exporting things.
Related
i want to retrieve json data from a file in a local folder using javascript.
i have the json data like below defined in the folder api/data.json
{
"title": "title",
"lists": [
{
"id": 1,
"title": "title1",
"items": [
{
"id": 1,
"title": "item_title_1",
},
{
"id": 2,
"title": "item_title_2",
},
],
},
{
"id": 2,
"title": "title2",
"items": [
{
"id": 2,
"title": "item_title_2",
},
{
"id": 3,
"title": "item_title_3",
},
],
}
]
}
i want to fetch this data on application load so i call fetchData method on load in body tag like so
index.html
<body onload="fetchData()">
<script src="main.js"></script>
</body>
in the main.js file defined fetchData like so
function fetchData() {
const data = fetch('api/data.json');
console.log('data', data);
}
but this throws error fetchData() is not defined. not sure where the problem is. i am new to javascript and learning it. could someone help me with this. thanks.
EDIT
based on answers provided i have tried below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="src/scripts.js"></script>
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
</head>
<body onload="fetchData()">
<h2>here i am </h2>
</body>
</html>
in the scripts.js file which is in src folder i have defined fetchData method
function fetchData() {
console.log('data');
}
but still gives me fetchData undefined.
include main.js before <body> tag you're loading the function after its called
Try this
<html>
<head>
<script src="main.js"></script>
</head>
<body onload="fetchData()">
</body>
</html>
<html>
<head>
<script src="main.js"> </script>
</head>
<body onload="fetchData()">
</body>
</html>
And if the json data doesn't print out on the console. Then , Run your index.html on localhost.
And you don't need to include it in index.html to use javascript.
You can use 'node js' to run js files without using browser. It is much easier in node than linking the script file in html
while using the ES6 module language in nodejs it gives me an error of
" IMPORTS CANNOT BE USED OUTSIDE THE MODULE" ERROR IN CHROME BROWSER.
I am trying to build my project using Node js express mongoose morgan express-handlebars and ES6
but while I run the project it gives me an error for the same
I tried using .babelrc and webpack.config.js but not able to resolve it.
can anyone help me to achieve it?
I am putting images of my project for your reference.
Thank You
enter image description here
enter image description here
Babelrc:
{
"presets": [
["#babel/env", {
"useBuiltIns": "usage",
"corejs": "3",
"targets": {
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
filename: 'index.html',
template: 'main.hbs'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
],
loaders: [
{ test: /\.hbs$/, loader: "handlebars-loader" }
]
}
};
main.js:
enter code here
import Search from './models/search';
import Movie from './models/Movie'
import User from './models/user'
import * as searchView from './views/searchView'
import * as movieView from './views/movieView'
import { elements , renderLoader, clearLoader } from './views/base'
const state = {};
const controlSearch = async () => {
// const query = searchView.getInput();
const query = 'avengers';
if (query) {
searchView.clearInput();
searchView.clearResult();
state.search = new Search(query);
state.user = new User();
searchView.clearInput();
searchView.clearResult();
renderLoader(elements.searchRes);
await state.search.getResult();
await state.user.userSignUp();
clearLoader();
console.log(state.search.result);
searchView.renderResults(state.search.result);
}
};
elements.searchForm.addEventListener('submit', e => {
e.preventDefault();
controlSearch();
});
main.hbs
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Movie Recherer</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/all.min.css"/>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/home.css" />
</head>
<body>
<div class="container">
<div class="row">
{{{body}}}
</div>
</div>
<script src="/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script language="javascript" src="/js/main.js"></script>
<script language="javascript" src="/js/models/Movie.js"></script>
<script language="javascript" src="/js/models/search.js"></script>
<script language="javascript" src="/js/views/base.js"></script>
<script language="javascript" src="/js/views/movieView.js"></script>
<script language="javascript" src="/js/views/searchView.js"></script>
</body>
</html>
You need to include you import inside a module:
Try this:
<script type="module"> import btn from './helper' </script>
Add type="module" in every script tag of your main.hbs file
I am trying to insert both my style and bootstrap in my React JS project. But I get the error: Refused to apply style from 'http://localhost:8000/bootstrap-3.3.7-dist/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I want it to be inserted through the index.html because it's what I am used to. I know the way to insert bootstrap by npm and importing it but I still just want it to be inserted through the index.html.
Hierarchy of files
Currently the following are my codes:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ticketing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="./style/style.css" />
</head>
<body>
<div id="app"></div>
<script src="/app/bundle.js"></script>
</body>
</html>
WEBPACK.CONFIG.JS
var webpack = require("webpack");
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module:{
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query:{
presets: ["react", "es2015", "stage-2"]
}
}
]
}
};
module.exports = config;
I think you should move the css and style folder into the src folder. Or try changing ./ to ../.
With following steps you can get it:
1st install bootstrap from npm (npm i bootstrap),
go to your app.js file add
#import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
#import 'YOUR_CSS_FILE.css'
I'm having trouble starting with polymer. The purpose is (simple) ; an Express server that serve my index.html and the index.html that serve my polymer element.
And my first problem is : How do I use node_moduldes and the require statement inside of my polymer element. I think I found some leads, like Browserify or RequireJS, but it seems complicated. (And browserify didnt work..).
Could someone provide me a simple way to use the node_modules in this polymer element ?
I'll start with my project structure.
And the file :
public/index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="./elements/neito-photoresistor.html">
<title>Neito's Domotics</title>
</head>
<styl></style>
<body>
<neito-photoresistor></neito-photoresistor>
</body>
</html>
server/app.js
"use strict"
//require
var express = require('express'),
path = require('path');
//Conf const
const _port = 3000;
//Server
var app = express();
//Middleware
app.use(express.static(path.join(__dirname, '/..', 'public')));
//Routing
app.get('/', function (req, res){
res.sendFile('../public/index.html', {root: __dirname});
})
.listen(_port, function (){
console.log('Server listening on : '+_port);
});
and the polymer element him self (I know it is complete bullshit but still the require problem is here): public/elements/neito-resistor.html :
<!DOCTYPE html>
<link rel="import" href="./../bower_components/polymer/polymer.html">
<!-- I know I cannot use the script src="" tag to import my node_modules -->
<dom-module id="neito-photoresistor">
<template>
<style>
</style>
<span>Ambient luminosity = <span>{{lum_pct}}</span> %</span>
</template>
<script>
Polymer({
is: 'neito-photoresistor',
ready: function() {
var mcp = require('mcp3008.js'),//I know that this line cause problem
can = new mcp();
},
properties: {
lum_pct: {
type: Number,
notify: true,
reflectToAttribute: true,
observer: '_getValueLumPct'
}
},
_getValueLumPct()
{
lum_pct = can.poll(0, 1000, function(value){
console.log('Luminosite ambiante = '+(100-((value/1024)*100))+' % ('+value+')');
return 100-((value/1024)*100);
});
}
});
</script>
</dom-module>
I'm getting the exact error as found here: (window.beforeEach || window.setup) is not a function. However the fix did not work, the author of the tutorial series here even mentioned the same fix.
Here is the Tuts+ author's fix:
Which is simply to place the angular-mock script tag after the Mochai and Chai scripts. Which I did so below:
test/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mocha Spec Runner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="../app/favicon.ico">
<link rel="apple-touch-icon" href="../app/assets/imgs/apple-touch-icon.png">
<link href="bower_components/mocha/mocha.css" rel="stylesheet">
</head>
<body>
<div id="mocha"></div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/mocha/mocha.js"></script>
<script src="../bower_components/chai/chai.js"></script>
<!-- see Angular-mocks is here :( -->
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="main.spec.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
My main.spec.js file
/**
* #name Mocha Test Runner
* #desc Describes and runs our dashboard tests
*/
var assert = chai.assert;
var expect = chai.expect;
// This Test is designed to fail on purpose
describe('User Login', function() {
console.log('User Login');
describe('Login Failed', function() {
console.log('Login Failed');
if ('Incorrect login should fail', function() {
module('loginController')
inject(function($injector) {
apiFactory = $injector.get('ApiFactory');
});
expect(apiFactory).to.be.an('number');
});
});
});
My Gulp tasks
gulp.task('serve', function() {
return browserSync.init({
notify : false,
port : 3333,
server: {
baseDir: ['app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
gulp.task('serve-test', function() {
browserSync.init({
notify : false,
port : 4444,
server: {
baseDir: ['test', 'app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
In your index.html file, you include the angular-mocks.js script before the call to mocha.setup('bdd'). angular-mocks.js is implemented as an immediately-invoked function expression which attempts to use window.beforeEach. (https://github.com/angular/bower-angular-mocks/blob/master/angular-mocks.js#L2586)
However, mocha.js is not immediately invoked and has to be initialized with the mocha.setup function in order to add its magic to the runtime environment.
Try reversing the order of these script tags, so that mocha.js is included and initialized before angular-mocks.js.
<script src='bower_components/mocha/mocha.js'></script>
<script src='bower_components/chai/chai.js'></script>
<script>
mocha.setup('bdd');
</script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>