Few days ago i decide to implement vue.js in a simple html5, css3 and javascript web. But now i can't import my libraries like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LiloTechnology</title>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="../assets/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../assets/js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="../assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../assets/js/jquery.isotope.js"></script>
<script type="text/javascript" src="../assets/js/wow.js"></script>
<script type="text/javascript" src="../assets/js/classie.js"></script>
</body>
</html>
Can you please tell me how to import external .js files?
Thank you.
You can just add external (from the outside) resources like so:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
and so on... CSS works the same way in link rel="externalUrlTo.css"
For a production ready app; maybe consider using a module bundler like Webpack and npm to install dependencies. Therefore you don't have to rely on a external services being up or down and have tighter control over bundling.
If you are in a ES6 or ES5-style CommonJS environment and using Webpack, you should consider installing your dependencies with npm
npm install module --save
and afterwards importing them in your JS code using var module = require('module') or in ES6 import module from 'module'
For instance for jQuery it would be npm install jquery --save (--save by the way stores it to your package.json to be able to restore your dependencies easily using npm install) and import it using var $ = require('jquery') (again ES6: import {$, jQuery} from 'jquery').
For jQuery in particular take into account, that some libraries rely on it being globally available. So make sure to import it first and assign it to window (or global) as seen in How to import jquery using ES6 syntax?)
If you require a specific version you might also want to add it to your package.json or install it directly using npm install module#version. Hope that helps a bit!
Related
I installed bootstrap using NPM
In a normal svelte project I usualy add bootstrap and other packages, which are used project wide, in the App.ts file. However, in a SvelteKit project there is no main entry point.
So what is the recommended way of adding bootstrap 5 or other packages to SvelteKit globally?
I don't want to use rollup plugins, but rather just want to import it as an module in JavaScript
As of SvelteKit 1.0, the easiest way I found to add static scripts and styles that will be available everywhere is to add them to
src/app.html
That is the file that includes everything else including the <html> tag, so you can place the styles in the <head> and the scripts in the <body>, including CDN URLs, like you have always done before.
This setup allows you to easily override Bootstrap settings, e.g. I added a style to unset the <body>'s background-color that is set by Bootstrap.
To host the scripts yourself rather than use a CDN, put them in the src/static directory and reference them using the prefix %sveltekit.assets%/. For example, I placed the files bootstrap.min.css and bootstrap.bundle.min.js in src/static/bootstrap-5.0.2/ so now my src/app.html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link href="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.min.css" rel="stylesheet">
<style>
body {
/* override Bootstrap */
background-color: unset;
}
</style>
</head>
<body>
<div style="display: contents">%sveltekit.body%</div>
<script src="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.bundle.min.js"></script>
</body>
</html>
If you want to use a CDN instead of self hosting the files then for e.g. for Bootstrap 5.0.2 you can use the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
You can make a top level __layout and import everything there.
I add this because this seems to be a good way for adding packages to a SvelteKit app.
https://github.com/svelte-add/svelte-add
If you want to add Bootstrap for example use
npx svelte-add#latest bootstrap
As of date of writing this, there are not alot of packages yet, hopefully that changes in the future.
Firstly run npm install bootstrap inside your sveltekit project.
Then
In your root +layout.svelte put
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
</script>
References
https://vitejs.dev/guide/features.html#css
https://vitejs.dev/guide/assets.html#explicit-url-imports
I am writing an app in Reactjs using react CDN Links, not 'npx create-react-app'. I have created an index.html, index.js, and App.js files. I want to import the App.js component in Index.js file using import App from '../components/App.js' but it is giving "can not use import statement outside module" error on the browser (client-side). following are the codes
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Notepad Web App</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- JSX -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- External JS File -->
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
INDEX.JS
import App from '../components/App.js'
const e = React.createElemnt;
ReactDOM.render(e(App), document.querySelector('#root'));
APP.JS
const e = React.createElement;
function App()
{
return(
e("h1",{},'This is React App')
)
}
export default App;
To include a JavaScript module in an HTML page, you have to tell that to the browser explicitly by adding type="module":
<script type="text/javascript" type="module" src="./index.js"></script>
You can read more about modules and how to use them here.
EDIT:
Regarding the new error you get, see here:
Unlike regular scripts, ES6 modules are subject to same-origin policy. This means that you cannot import them from the file system or cross-origin without a CORS header (which cannot be set for local files).
Basically you need to run this code from a (local) server.
You can use live-server:
Install it by running:
npm install -g live-server
Run in your website folder:
live-server
Open http://localhost:8080 in your browser, and your site will work
Changing the type to"module" can solve the issue like this:
<script type="module" src="./index.js"></script>
Also, you have a syntax error line 2 in index.js const e = React.createElemnt; you have a missing e in the word Elemnt.
I used to write a react app by using create-react-app and there was no problem. However, I tried to make a small app using only index.html and app.js. Errors were raised in Chrome to import and JSX. For import, Uncaught SyntaxError: Unexpected tokenFor JSX, Uncaught SyntaxError: Unexpected token <Is it because I did not install BABEL or ES6.
I tried to install babel but it still did not work. I also tried adding type="text/babel"
index.html
<!Doctype html>
<html>
<head>
<title>Social Card</title>
<meta charset="utf-8" />
</head>
<body>
<h1>content fahafafafaddha</h1>
<div id="root">
</div>
<script src= "app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>
</html>
app.js
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<h1> Hello</h1>,
document.getElementById('root')
)
The error is definitely because your code has not been transpiled (which is what babel does). You say that you installed babel..what do you mean by that? You need to configure babel so that it transpiles your code before you run it. create-react-app does it for you by using webpack to transpile, bundle and minify your code.
If you want to learn more about the specifics of how things are working and how to configure your app, Create a new create-react-app, and then run
npm run eject
This will eject all of the previously hidden configurations and help you understand how things are functioning.
UPDATE
One thing you can try is to inst all babel-cli with
npm install --save-dev #babel/core #babel/cli
and then you can use it like
npx babel app.js --out-file app-compiled.js
and use app-compiled to run the server.
UPDATE 2
You are using ES6 syntax (the import statements) as well as JSX (using HTML-ish code in a javascript file). This code cannot be compiled directly by a JS compiler and that's why it's showing you the above error. In order to fix this you need to transpile it into JS that can be read by the browser. There are several ways to do that, some of which are:
Use webpack to transpile, minify, bundle and inject your code into your html.
Use babel-cli to transpile your code manually, and then import the transpiled file instead
Use babel standalone as is explained here
As for what I meant by use app-compiled, I meant include the output file from the babel-cli command (app-compile.js if you ran the command i wrote above) in your html instead of app.js
The order of your <script> tags is important. They are loaded in the order they appear. So your app.js must come after babel and react:
<div id="root"></div>
<!-- DEPENDENCIES MUST COME FIRST -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- Your scripts -->
<script type="text/babel">
const App = () => <h1>Hello React!</h1>;
ReactDOM.render(<App />, document.getElementById('root'));
</script>
Next you can't use import statements when including your dependencies only with script tags. They will simply be available in global namespace. You could maybe use modules too when specifying the type="module" attribute on the script tags but that feature was only fairly recently added and may not be supported by a percentage of currently used browser versions.
I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.
You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation
I am trying to build a website using materializecss's carousel component. I successfully did it on this stackblitz and then tried to export it to my computer, but I ran into some issues.
Steps to reproduce :
Export project
Unzip
npm install
ng serve -o
That produces the error "cannot find module '#angular-devkit/core'.
I installed it using npm install --save #angular-devkit/core, and then tried to run the project again, this time getting the following error :
Error message "Cannot find name '$'
I'm new to Angular so I might be missing something very obvious here, but from what I gathered, that must be an issue with the import of jquery.
I thought importing via link in my index.html was enough, but I've had to also add all the links in the "external resources" on stackblitz to make it work.
I would guess that this is the import part that was not correctly added to the project I downloaded, but then how and where do I have to add the import on my local project?
<head>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<my-app>loading</my-app>
</body>