I have configured Babel for my project with ".babelrc" file. My .babelrc file is,
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
I have imported "core-js/stable" and "regenerator-runtime/runtime" using index.js in my index.html as follows. I'm using Parcel as the packaging tool.
<!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">
<script src="../js/index.js"></script>
<title>Document</title>
</head>
<body>
<h1>Hello Second App</h1>
<script>
(() => {
console.log('welcome ...');
})();
function getUserById(id) {
return Promise.try(function () {
if (typeof id !== "number") {
throw new Error("id must be a number");
}
return "done";
});
}
getUserById();
</script>
</body>
</html>
Also as you can see I'm trying to use "Promise.try". But I'm getting
Promise.try is not a function
So why Babel is not fixing this? Please help me. I'm trying to understand Babel.
Related
I am new to electron. While learning it i came across require not define error on browserwindow. So i searched about it and find out we should need to add nodeIntegration: true, so i did it but still it doesnt solve my problem.
here is my app.js (entry file)
function createWindow() {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
win.on("close", () => {
win = null;
});
}
app.on("ready", createWindow);
and my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>main renderer</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>main renderer</h1>
<script>
require("./index.js")
</script>
</body>
</html>
I'm trying to use contextBridge in Electron, but I keep getting an error when I try to require('jQuery') in preload.js. Here is my preload.js:
const { contextBridge, ipcRenderer } = require('electron')
require('jQuery')
contextBridge.exposeInMainWorld(
'ipcRenderer',
{
send: (channel, arg) => ipcRenderer.send(channel, arg),
on: (event, data) => ipcRenderer.on(event, data)
}
)
As soon as I put require('jQuery'), I get this error:
I want to import APIs like this since it improves security and contextIsolation will be enabled by default in later versions of Electron.
I have no idea if this is secure or not, but I just imported jQuery from index.html:
<head>
<meta charset="UTF-8">
<title>Gemini</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="macos.css">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="node_modules/#fortawesome/fontawesome-free/css/all.css">
</head>
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.
My app structure is following:
-gulp
-src
-app
-assets
-css
I want to insert files from "css" folder in index.html which is in "src" folder.
use the below code and set the path accurately.
var inject = require('gulp-inject');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('inject', function () {
var injectStyles = gulp.src(['css/*.css'], { read: false } );
return gulp.src( '/src/index.html')
.pipe($.inject(injectStyles, { relative: true }))
.pipe(gulp.dest('/src'));
});
specially you need to enter styles comment tag in your html file as below:
<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>Document</title>
<!-- inject:css -->
<!-- endinject -->
</head>
I'm learning app testing at the moment, using this course: https://code.tutsplus.com/courses/angularjs-for-test-driven-development/
I'm on lesson 2.3 where we have Mocha and Chai installed, a test folder with main.spec.js setup and gulp task setup to serve the app and tests.
When he updated his main.spec.js file with this simple describe statement:
describe('The Address Book App', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
It ran fine for him:
However here is my setup:
test/main.spec.js
describe('The Dashboard app', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
Basic markup:
<!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="testing.css" rel="stylesheet">
</head>
<body>
<div id="mocha"></div>
<script src="../bower_components/mocha/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="../bower_components/chai/chai.js"></script>
<script>
mocha.run();
</script>
<script src="main.spec.js"></script>
</body>
</html>
However my test file isn't displaying my first test:
Gulpfile setup, same as the authors, cept PORT numbers are different:
gulp.task('serve', function() {
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'
}
}
});
});
Any idea why my first basic test isn't running?
Everything looks right except the ordering.
Just swap the
<script>
mocha.run();
</script>
with
<script src="main.spec.js"></script>
You want to run mocha at the end when all your specs and setup is done.