Using Handlebars in the Browser as an ES6 Module - javascript

I am trying to use Handlebars in the Browser (client-side script). I am importing a js module templating.js (see below) and want to import the Handlebars library as an ES6 module but can't find any documentation.
In the example below I was lifting the contents of the following js library as handlebars.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Templating</title>
<meta name="description" content="example showing how to template content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="templating.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
<script type="module" src="templating.js"></script>
</head>
<body>
<header>
<h1>Templating</h1>
</header>
<main>
</main>
</body>
</html>
/* templating.js */
import { Handlebars } from './handlebars.js' // v4.7.6
document.addEventListener('DOMContentLoaded', event => {
console.log('DOMContentLoaded')
})
I'm getting the error: requested module './handlebars.js' does not provide an export named 'Handlebars'
Does anyone know:
What handlebars library to use?
How to import this into my script?
Any help greatly appreciated...

Loading handlebars via a script tag will expose it as a UMD (universal module definition). This just means that all functionality of the library is exposed via global variable(s). In the case of the library link you provided, the main global variable appears to be Handlebars.
If you would like to import handlebars directly into your script as a CommonJS/ES6 module, you would need to use a build tool such as Webpack.
Try rendering your HTML document in a browser and then typing Handlebars in the devtools console, you should see an object containing all of Handlebars' exported functions.

Related

Vue template not work while using es6 import vue

Below is my reproduce step:
npm install vue#2.x.x
write below code in my main.js file
import Vue from 'vue' new Vue({
el: '#app',
data: {
msg: 'hello,word'
} })
use webpack build it, then it will build a file in dist folder
then I write index.html file
<!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>Document</title>
</head>
<body>
<div>
<div><span id="app">{{ msg }}</span></div>
</div>
<script src="./dist/main.js"></script>
</body>
</html>
then I open the index.html file in chrome, but it not display 'hello, word', I am a new beginner vue, I can not figure out what it wrong. thanks in advance.
And I alse found that vue delete my dom like above img.
At first, I thought it was because you weren't running the project properly but then I realized that the comment you've pointed to with the red arrow shows that the Webpack server is in fact running.
The problem you're having here it seems, is that you're using the runtime-only build of Vue when you need the runtime + compiler build to compile Vue components that have template blocks or swap the template blocks for render functions.
If you don't use the version with the compiler but your components have template blocks, then they won't compile properly (although normally an error is shown to advise of this).
For instructions on using the full build rather than the runtime-only version, see here.

Require function is not defined

I am working on a 3D viewer using express.
My problem is that I am trying to require the file system module in one (not the main one) of my JS files. When I try to load the browser, the console gives me the next message:
ReferenceError: require is not defined
My project structure is:
node_module
src
js
app.js // the problem is here
views
index.ejs
server.js
A short example of how to use importing with the browser:
Create index.html with next content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
Check script tag - we set type="module" - this instructs the browser that we are using module system
Create main.js script with:
import name from './name.js';
console.log(name);
Create name.js file:
const name = 'test';
export default name;
Now you need to run this app. The easiest way is to use WebServer For Chrome
Start the application and check the console. You should see that the 'test' is logged.
That's it. Please, keep in mind that this is just an example. We don't touch minification, caching and other important things.

How does a Vue app get launched if the index.html doesn't load any javascript?

None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.

external JavaScript File not working in angular 2

I am building a web app with Angular 2 framework and I want to use an external template. Trying to convert it into an angular2 SPA.
I need to run some scripts (custom.js). All CSS and JavaScript file are added in Index.html.
Everything is working fine except external js. JavaScripts are not working properly. But the CSS files are working. Material components and modals other JavaScript functionality nothing is working inside angular component file.
In your .angular-cli.json file you need to add the external js file under your app's scripts property.
{
// other app config
apps:[
{
// Your app config
"scripts":[
"path/to/your/custom.js"
]
}
]
}
If you would like to use the script in a component, you should declare it before the component class.
declare var customLibraryName: any;
See the Angular Cli Wiki for more details.
thanks #JosephDragovich for your fast reply. To be honest, I am a fresher in Javascript and angular 2. Following your suggestion, I updated my code as below:
javaScript not working
angular-cli.json
"scripts": [
"./src/assets/Js/jquery-2.2.4.min.js",
"./src/assets/Js/bootstrap.min.js",
"./src/assets/Js/jquery-ui.min.js",
"./src/assets/Js/jquery-plugin-collection.js",
"./src/assets/Js/custom.js"
],
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LocumMedApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body class="has-side-panel side-panel-right fullwidth-page side-push-panel">
<app-root></app-root>
</body>
</html>
place script in index.html also using <script> tag.

Include Angular inside a TypeScript file

I have a type script file and want to include angular.
I have the following throwing errors when compiling the typescript as angular is not included as a referenced file or anything:
app.ts
var app = angular.module('app', []);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="Scripts/angular.min.js"></script>
<link rel="stylesheet" href="app.css" type="text/css" />
</body>
</html>
Obviously it does not matter that my index.html file correctly states dependencies in order as the compiler has no idea where angular comes from.
How do i include the external files?
You have to declare angular variable to tell compiler something like angular will be presented at runtime. You can combine it together with downloading already existing declaration file from DefinitelyTyped github repository.
If you don't want to do that, you an just use this instead:
declare var angular:any;
But I highly recommend using DefinitelyTyped Angular.js declarations, and declarations for all other 3rd party libraries for that matter. You will get code completion support.

Categories

Resources