How is Bower different than jspm? Can Bower provide jspm functionality about SystemJS universal module loader?
Well JSPM is much larger and ambitious project than Bower. Bower has only one purpose-to download source files you need from the web to your hard disk. For you as a consumer, bower doesn't do anything else. If you want to execute script files from bower, you need to create your script tags for each of them.
While jspm is not only a module downloader. It downloads by default systemjs that you have mentioned. SystemJS is implemented as closely to https://whatwg.github.io/loader/ as possible. Actually author of JSPM is very active participant of the specification process. With systemjs, today you are able to load ES6(by transpiling them in the browser), CommonJS or AMD modules in the browser without building them. Not only ES6 modules, but all the other ES6 features supported by traceur/babeljs/typescript. Depending on which compiler you choose when running jspm init. SystemJS works 1:1 in node.js as well as in browser, so unit testing your app is easily done.
Also it can build the bundle for you(jspm build) when you need to go to production. So it is obvious that jspm(+systemjs) is a more powerful tool.
So as a rule of thumb:
need to quickly get jquery and include it in your serverside templated html? Go with a regular script tag. Bower has been deprecated.
need to build large JS app? Go with Webpack. JSPM has failed to reach critical mass and everyone's doing webpack now.
To add on to Capaj's answer:
If you have a small project, go with jspm anyway! It's the future! (who knows, things change, but this is a good bet).
Small project use:
$ jspm install jquery
then in your HTML:
<script src="jspm_packages/system.js"></script><!-- required -->
<script src='config.js'></script><!-- required -->
<script type="module">
System.import('path/to/your/main.js')
</script>
then in main.js:
import $ from 'jquery'; // ES6-style import
// do whatever with jQuery here.
You can use CommonJS, AMD, or ES 6 module formats. JSPM auto-detects them in your files (you can't mix and match in the same file though).
var $ = require('jquery'); // CommonJS-style import
// do whatever with jQuery here.
define(['jquery'], function($) { // AMD-style import
// do whatever with jQuery here.
})
Related
I have been going through all kinds of tutorials they are either just straight up not useful or they are using previous versions of VS and/or ASP.NET.
How do you install tailwind CSS on an MVC project?
I wish they had published the lib for everyone to copy and paste in their resource file and use it freely.
How do you install tailwind css on a MVC project? I wish they had published the lib for everyone to copy and paste in their resource file and use it freely.
You can try to include tailwind css from CDN, like below.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Besides, you can try to finding client-side libraries and add the required files to your project through the Add Client-Side Library dialog.
I've created this package that's adding a new build action.
You simply set the PackageReference and set the build action of your stylesheet to TailwindCSS. During the build process, the stylesheet will be converted via PostCSS.
For more details, you can take a look at its GitHub repo.
Then working on my new Vaadin 14 based application Intellij cannot find the built in lumo theme variables...
These variables exist at runtime in my browser, but where can I point Intellij to see them?
It looks like it's not possible, at the moment, unfortunately.
The problem is that starting from V14 styles you want to reference are packaged as.js files, but styles are written in .css. For example, if in V13 you could import them in your template like this Sizing and spacing:
<link rel="import" href="bower_components/vaadin-lumo-styles/sizing.html">
This would be the current way in V14 instead, which is a js file:
<script type=“module”>
import “#vaadin/vaadin-lumo-styles/sizing.js”;
</script>
So you can use those custom variables in your styles without problems, as long as you load an appropriate js module on your page (like this #JsModule(value="#vaadin/vaadin-lumo-styles/sizing.js") Lumo), but I haven't found a way (and not sure there is one) to make Intellij aware of them.
So the underlying problem is that you can't import a variable from a js file into a css file.
We have an application written entirely dart/polymer with quite a few polymer components. We use the custom tags in out index.html and compile to dart with pub build. The compile to javascript creates index.html of 24K lines. Original index.html is 150. The application works perfectly.
However we would like to distribute the code to third party sites so that they also can use the components with custom tags. Ideally by just linking to an already compiled script and simple using our custom tags in their pages.
I know this is possible without polymer. Question is does polymer support this? Is it possible to compile a polymer app and keep to a minimum amount of changes in the html file?
To reduce the problem to an example:
We would like our customers to be able to do some thing like this, without the use of dart sdk:
<head>
<script src="what_ever_required.js"></script>
<script src="our_application.js"></script>
</head>
<body>
<our-custom-tag></our-customer-tag>
<p>What ever else content</p>
</body>
Regards
That's currently not supported.
Currently an application that used Dart code needs to be compiled to JS as a whole at once. There is no way to build parts of a Dart application and compose an application from them later.
With the upcoming DDC (Dart Development Compiler) there might be a way to accomplish that. An experimental approach is https://pub.dartlang.org/packages/polymerize
In an Angular style app, I would expect the typescript files to be bundled together and basically all loaded at start up of the app. In an MVC type app (a view per page, not a SPA), I would expect to only load typescript for that page. I don't want to load typescript that is not relevant for that page.
I split my typescript into separate files (basically one class per file). I then set up import/export clauses in the files to reference the classes. I think this approach will work better when I go to use external libraries (jquery, etc). If I use namespace, later on when I go to use third party libraries I don't think it will work.
However, that means I need to look at some sort of loader. If I have lots of little typescript files I don't necessarily know when all files have loaded before attempting to use them, which is the sort of thing that requirejs looks after. I haven't used web pack but I think it does the same sort of thing?
But that would mean I would need a requirejs config for each MVC page which doesn't seem to be very efficient. What approach should I be taking to load all the typescript files I require for the specific MVC page, bearing in mind I could end up with dozens of MVC pages?
There is now (2021) a partial solution to this question. I'm not sure it is "efficient" but it does load multiple Typescript files on different MVC pages.
If you alter your typescript config to output ES6 modules, tsc will create one JS file fore each TS file, each in an ES6 module. If you then use a module script tag, the browser will import the files as needed
<script src="scripts/modules/start.js" type="module"></script>
<!-- and/or -->
<script type="module">
import { loadStats } from 'pages/homepage.js'
<!-- note that this is JavaScript -->
loadStats();
<script>
This does require users to be using a modern browser: https://caniuse.com/es6-module
This is not a panacea - there are lots of gottchas and work arounds, one big one being that import statements must be in JavaScript Module style, not TS style
import { loadStats } from 'pages/homepage' // <-- Will not work at runtime
import { loadStats } from 'pages/homepage.js' // <-- Use this style. Note the JS extension
as tsc does not correctly convert import statements. This should point at the TS file (as the created JS files will have the same relative path), Visual Studio appears to be able to cope for the purposes of intellisence and compiling.
We managed to get npm to work for typings, but struggled for other packages. We have, though, been able to retro-fit typescript into an older MVC app this way (we wanted/needed type checking for API calls).
I am building a client/server app in Dart using Angular for the front-end and Shelf on the backend. When I do a pub build it generates the javascript for the Dart files as expected but is does not replace the dart references in my HTML files. So in my index.html I have the following script reference:
<script type="application/dart" src="main.dart"></script>
This makes my application not load correctly. If I manually change it to
<script src="main.dart.js"></script>
My application works as expected. My question is, is there a way to configure my pub build to do this automatically? Or are dart files references not supposed to be replaced with JS references? If so, how do I build a basic server?
I know this produces an error message in the browser console but never experienced any problems because of this.
I haven't used it myself yet but I think this transformer https://pub.dartlang.org/packages/dart_to_js_script_rewriter does what you want.