Is it possible to merge JS files (or CSS files) with parcel ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/aos.js"></script>
<script src="/js/club.js"></script>
</head>
<body>
</body>
</html>
When I run
parcel build js.html
I got 2 minified .js files into /dist
Is there a way to get one single file ?
regards
I don't think there's currently a config-driven way to get parcel to do this, but if your project can tolerate using modules (and if you have a choice - i.e. you wrote both aos.js and club.js), I would highly recommend this to avoid bugs that can come with global variables), then you can have your html reference a single index.js file, which then imports all of it's dependencies, like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/index.js" type="module"></script>
</head>
<body>
</body>
</html>
Note the type="module" property in the script tag - see documentation
js/index.js
import "js/aos.js"
import "js/club.js"
Related
I am using visual studio code .I have the php extension installed already . But it is very repetitive to create each php file with the base structure like this one . Since it does'nt automatically insert it for me .
<!DOCTYPE HTML >
<HTML lang="en">
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Is there anyway or short key to quickly copy this structure into the newly created php file ? without using control+C control+V from a note ?
If you are using VS code then you can use this command shift + 1 and enter to auto-populate HTML Doctype in HTML or PHP.
When you will press enter it will add the following code:
<!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>
</body>
</html>
press---> Shift+1 + enter or tab
OR
press----> html:5 + enter or tab
Note:- In VS-Code.
Type !, and then click the first snippet in the auto complete. It will generate the default HTML template
<!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>
</body>
</html>
Or, you can use snippet to add your own code, and this should help you
I don't know why. just ! doesn't work for me, but when I type html5 or html:5 and use autocomplition, it works like a charm.
I am learning openui5 (Version 1.61.1) using openUI5 Documentation
From the version 1.61.1 openUI5 includes index.js file.This index.js file is missing in the documetation from "step:9 Component configuration " till the last step. I am unable to proceed further without index.js file.I am not sure whether i missed any point or its something related to documentation error.
I have found the issue. in step no 9 we have to include the below meta
data tag and change onInit value in index.html file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
I had the same problem with step 9 of the tutorial. In addition to the suggested changes, I had also to change the body of the index.html to show the content of my view.
My working index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatter UI</title>
<script
id="sap-ui-bootstrap"
src="http://127.0.0.1:8080/openui5-demo/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
>
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container"></div>
</body>
</html>
I have found the issue. in step no 9 we have to include the below meta data tag and change onInit value in index.html file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
However i am not sure why its working if we add this meta data tag. can anyone explain me.
This morning, I was able to view vscode intellisense suggestions with PIXI.js.
My index.html file:
<!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">
<title>Fun with PIXI</title>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
My index.js:
const app = new PIXI.Application();
document.body.appendChild(app.view);
Serving the file and running index.js is fine. I am just so annoyed that I lost intellisense suggestions for PIXI.js (or any third party libraries). I still do see Intellisense suggestions working for DOM APIs (i.e. document methods, etc...)
I am new to web development and couldn't find a clear answer.
Is it possible to use Bootstrap in Vapor with Swift 3?
Yes, you can use Bootstrap. You will either:
Add the CDN links to your template files, i.e. .leaf files, which are in the Resources/Views/ folder, or
Download the Bootstrap files and add the CSS, JS, fonts, etc. to the Public/ folder which can be accessed by all the pages.
For the first suggestion, you could add the CDN links to your base.leaf, like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
For the second suggestion, you would place the files in here:
Then access the files like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/styles/{CSS-FILE-NAME}">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="/{JS-FILE-NAME}"></script>
</html>
CoffeeScript code is not working when the 1.10.0 version coffee-script.min.js is linked.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset='utf-8'> </head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script>
<!--
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js" > </script>
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.10.0/coffee-script.min.js" > </script>
<script type="text/coffeescript" >
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
The latest working CDN coffee-script.min.js is 1.4.0. What is the problem?
Those script hosted in CDN are not for browser, I think.
I tried your code, and as you say it did not work and there was the following console log.
Uncaught ReferenceError: require is not defined
require is a specification of commonJS and it is not implemented in browser default.
If you would not like to compile and make it work easily, the code below is available.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
</head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
<script type="text/coffeescript">
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
This way is introduced at the official site.
http://coffeescript.org/
While it's not recommended for serious use, CoffeeScripts may be included directly within the browser using tags. The source includes a compressed and minified version of the compiler (Download current version here, 39k when gzipped) as extras/coffee-script.js. Include this file on a page with inline CoffeeScript tags, and it will compile and evaluate them in order.
Error in packaging on the part of the CDN provider, see here:
https://github.com/jashkenas/coffeescript/issues/3811
https://github.com/cdnjs/cdnjs/issues/4869