First Ask
I can't find info about how to import js file into a dart and run. (non-web)
What info I known:
Using js_facade_gen to gen facades for TypeScript libraries, but it is need a html to import js.
<head>
...
<script type="application/javascript" src="./xxxx.js"></script>
Can you give me some ideas, thank you very much.
ps: if it is no code to write, it is wonderful
More info(second)
some more info:
pub.dev/packages/flutter_qjs
https://pub.dev/packages/flutter_jscore
https://pub.dev/packages/flutter_js
But they're running code, not libraries.
Anyway, I don't have to be on the Web. But the problem remains difficult
idea from
https://github.com/duyduong/interactive_webview
https://github.com/berberin/qrpay-sol
it can use a web as a runtime.
Related
https://v3.vuejs.org/guide/installation.html#download-and-self-host
https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler
how do I import vue without CDN?
so what I care about is not having a build step. everything in pure human-legible js.
I found this https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack
I'm going to try and implement it inside unity Embedded browser https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
the challenge is that my interface cannot load things from the web and it can't be compiled.
Create index.html
index.html (using Vue 3 - important!)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Minimalistic Vue JS</title>
<script type="text/javascript" src="./vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = Vue.createApp({
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
</html>
Download vue.global.prod.js from https://unpkg.com/browse/vue#3.0.11/dist/vue.global.prod.js and save it along index.html
Open index.html in browser
Works just fine in Chrome or Firefox.
Notes
for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root
Note: following is related to the repo linked before question was changed
The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work
Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:
As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...
Update 1
Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules
To use Vue as a module from a local installation, you don't want to explicitly include it in a script tag in your page. Instead, import it in the scripts that use it. The whole idea of modules is that you can import them which makes explicitly including them in your page obsolete.
In https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js, import Vue:
import * as Vue from "./local/path/to/vue.esm-browser.prod.js";
I just started getting this error today, and it broke my whole site (because like a fool I'm loading Vuetify on page load).
Does anyone know what this means or how to fix it? Googling around didn't reveal anything helpful.
Edit:
To anyone who finds this because their site is also broken, it may be because of where you were loading vuetify.min.css from. For me I was getting at page load like so:
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
And solved the problem by importing it from the installed package instead with
import 'vuetify/dist/vuetify.min.css'
in app.js.
I'm still interested in learning about this v-ripple business, though.
I got into the same problem and I solved by installing
material-design-icons-iconfont
Run the following command to install:
npm install material-design-icons-iconfont
or, if you are running from yarn then:
yarn add material-design-icons-iconfont
Now import in main.js file:
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
You can read the vuetify documentation for more information:
Vuetify Documentation
I ran into this same issue today and started going down the route of importing it as suggested above when I noticed the header:
#charset "UTF-8";
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.
It looks like they bumped the dist version (I'm working with 1.5.12). I updated my link href to:
https://cdn.jsdelivr.net/npm/vuetify#1.5.12/dist/vuetify.min.css
...and my site was put back together again. It's probably better practice to bring it in as a module but that'll be something for the backlog. Hope this helps somebody.
For me, the problem was I had both tslint and eslint installed. After I disabled eslint, it worked.
I would like to call an npm module from my code which is an es6 module. Is there a way to do this without transpiling or bundling my code? The reason I don't want to transpile is for simplicity and so I can see my code changes instantly in the browser when I'm debugging.
You can work with native ESM modules in the browser using the script type="module". It works only for browsers that support it.
index.html
<html>
<head></head>
<body>
<script type="module" src="my-script.js"></script>
</body>
</html>
my-script.js
import {stuff} from './module1.js';
import Stuff from './module2.js';
console.log(Stuff);
console.log(stuff);
module1.js
export const stuff = {b: 1};
module2.js
export default {a: 1};
Then setup a quick web server to see the page working:
python -m SimpleHTTPServer 7654
That said, if your problem is refreshing your code at every change and debug it in ES6 dev mode, I recommend sourceMaps as the solution. With sourceMaps you can see your code working compiled (or "transpiled" as you like) as in production while debugging the development version in ES6. Webpack (or alternatives) is very optimized right now and can do partial compiling very quickly reloading the browser at every save.
When using Jasmine in a Rails project, to keep the dependencies consistent in my Jasmine specs, I want to pull jquery from a cdn as is done on the real page. I try to do that like so, in my Jasmine.yml file:
helpers:
- http://code.jquery.com/jquery-1.9.1.js
However, this never works, as when viewing the source of the localhost:8888 I get:
<script src="/__spec__/http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
How do you this correctly?
as answered in https://github.com/pivotal/jasmine-gem/issues/135
I wrote a helper to load external javascripts. It's not the best solution (i would prefer config file use) but it works for me.
var head = document.getElementsByTagName('head')[0];
var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('type', 'text/javascript');
jQueryScript.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
head.appendChild(jQueryScript);
#emrox's answer is correct and works for jasmine 2.0.
However in jasmine 2.1.3 it doesn't. This is due to the fact that when the tests are run(i'm using Chutzpah) "http:" isn't pre-pended to the CDN reference. It is in version 2.0 of jasmine.
The fix I implemented that worked involved the following line of code:
jQueryScript.setAttribute('src',
'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
Hopefully this helps someone before they decide to downgrade to 2.0!
Issue 135 made it so you can list CDN entries in your jasmine.yml file. e.g.
src_files:
- http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js
- http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
- lib/javascript/**/*.js
I just started to learn Dojo. I followed one site Widget example with some different ways to load Dojo libraries. I like to use AOL reference to load dojo.js like this:
<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js">
</script>
and saved my widget codes in local web server like this:
scripts/
myWidget/
widgetExample.js
...
test.html
where widgetExample.js contains my widget class codes, and test.html is my testing page. The error message I got is: "uncaught exception: Could not load cross-domain resources: myWidget.widgetExample ...". I am not sure if I have to load dojo package locally? I really like to separate dojo library package as they are or loaded from AOL and only put my own codes in a local path. I tried to google about different domain loading, baseScriptUrl, and moduleMapping? Still not be able to figure out. Thanks for any detail instructions if any.
This may help: http://dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/xdomain-usage-dojo-loading-not-detecting-local-modules
The summary is: you need a djConfig item registering the modulePaths you want to be local, and specify a baseUrl to "trick" Dojo into thinking it knows where those paths are relative, across hosts.
djConfig = { modulePaths: { "mine":"/js/mine" };
then you can dojo.require("mine.Thing") from /js/mine/Thing.js
Regards,
Peter Higgins