Import backbone template text in ES2015 - javascript

Anyone know how to import backbone template in ES2015.
I saw an example from this site
import * as todosTemplate from 'text!templates/todos.html';
The main problem is 'text!', how can I setup this one without Require.js?
P.S. have no luck with handlebars and require-text in ES2015, only found solutions using require.js.

Remove the * and just state the variable name of your choice. Like the code below:
import rootTemplate from './templates/rootTemplate.hbs';

Related

Is there a difference between this two ways of importing in React?

I have seen this line of code before in React
import {Something} from "Somethingelse" then I've also seen this one import Something from "Somethingelse" what's the difference between the two and when and why would I use either? and also is it a good idea to skip javascript and learn react directly if you are already pretty familiar with another language like Java for example?
Yes there is a difference between this two ways of importing any component in react.
First way of importing
import Something from "Somethingelse"
you can use this when you are exporting any function as default like below.
export default Somethingelse
Second way of importing
import {Something} from "Somethingelse"
You can use the above syntax when you have exported any function as const like below.
export const Somethingelse
And for your second question.
I would recommend to at least learn basics of the JavaScript before jumping into React even if you know language like Java, Because JavaScript is quite different from Java.
The difference is related to how the module (the functions inside it) is exported. If we write export default someFunc then we can import it using import someFunc from someFile. But if instead we write export {someFunc} then we have to import it using import {someFunc} from someFile.
You should understand the fundamentals of JS, especially Prototypal inheritance. JS OOPS are somewhat different from OOPS of Java, so understanding them will definitely help, because props in ReactJS works on the concept of inheritance.
Importing via the ways you mentioned is dependent on exporting these files. To be accurate, when we use
export const default Something
we use
import Something from "Somethingelse"
,
and when we use
export const Something
we use
import {Something} from "Somethingelse"
. Here is the hint, in the second case we can use import {Anything as Something} from "Somethingelse"(and can use as Anything in your project!)
Regarding learning javascript before react, I consider, you should as js is the core of React or any js framework/library. But you can also skip (even though you cannot skip javascript base) advanced js if you think you should learn something soon

How do I structure a Javascript library/module so that users can do partial imports using path (slash)?

I'm not sure I'm even asking the question in the correct way. Basically I have a project with many modules. I would like users to be able to import * from 'myModule' and I would also like for the option to import only a specific function using a path like import thing1, {thing2} from 'myModule/things'
Will someone point me to or tell me the name of the thing I'm attempting to do?

What's needed in a Javascript Library to allow use of Import function directly?

I use Angular with vanillajs libraries. There is no problem. Library works fine, but most of the time, I have to do the following
declare var MyLib: any;
However, for this particular library (CanvasJS), this works...
import * as CanvasJS from '../../assets/canvasjs/canvasjs.min.js';
What's different, and most importantly how does the library allow import function directly?
The difference is inside the JS library that you are importing.
In this repository I've added a showcase using canvasJs, underscoreJs and Jquery. I hope everithing it's explained in the comments HERE.
Only the latter (jquery) has the need to be defined as a "script" inside the angular.json file ( or inside the index.html file, it's the same ) because it's not defined as an exportable object but it's a factory which adds the variable $ to the global context when executed.
So in this case, you don't need to IMPORT it, you just have to "declare" the already present variable in the context to not have TypeScript errors!
As a bonus, the correct way to use JQuery inside an angular project is to install jquery #types, you can find it in this branch.

How do I go about integrating a regular javascript file into my vue.js page?

I have a js script written in pretty much the same syntax as one would write one without vue.js, although I haven't included semicolons (not sure how this might help but throwing it in there anyway).
I'm curious as to whether I should put this script into the format of one object with multiple methods and data/variables as properties of that object, similar to how it is written at the bottom of a vue.js page.
I'm entirely new to vue, but not to JavaScript.
If I have some script called myscript.js, and I want to include this file, its functions and variables, in a .vue file (not in the main.js file, because I don't want it to be loaded on every page, just the one I'm working with), how exactly should I go about including it in the file?
I am extremely aware as to how vague this is, and I'm absolutely happy to elaborate, but at the moment my mind is unable to intuitively explain exactly what I mean (mostly out of exhaustion unrelated to programming).
Any advice would be greatly appreciated.
Thanks!
JS code can be imported in the JS part of .vue files exactly as you'd import regular JS files. You don't need to import Vue components, it can be anything you can import normally - data, functions, objects, etc. Minimal example:
// name.js
export default 'John Doe';
// Hello.vue
<template>
<p>Hello, my name is {{fullName}}!</p>
</template>
<script>
import name from './name';
export default {
data() { return {
fullName: name,
}}
}
</script>
You can just use in .vue filerequire('./myscript.js') and use strict directive by adding use strict; to the beginning the script
EDIT : you have to export your functions in myscript.js file
// myscript.js
export function fn1() {...}
export function fn2() {...}
and then import them in your vue file
import * as MyFn from './myscript.js'
MyFn.fn1();
MyFn.fn2();

Import JSON file inside a ES6 supported project

I'm getting a it confused here. In a VueJS project I'm using a dummy json data in the following way :
import data from './assets/data.json'
which i can than print to the screen, for example : {{Object.keys(data)}}
In this
question i find different answers, some claim you cant import json files, some claim you can
. common sense implies that i can import them since it is working in my project, now the question is:
is this some Webpack magic helping me to achieve this import or any other behavior taking place under the hood? or is ES6 actually allows me to import json as presented above?
Please go through,
How to import a json file in ecmascript 6?
Says,
ES6/ES2015 doesn't support loading JSON via the module import syntax

Categories