How to configure babel in non-nodejs Environment/without npm ?
Use babel-standalone. Its documentation emphasize non-Node.js environments just like you do:
babel-standalone is a standalone build of Babel for use in non-Node.js environments, including browsers.
To confogure it, you can use data-presets and data-plugins attributes as also depicted in the Github page usage docs as follows:
<script type="text/babel" data-presets="es2015,stage-2">
Related
I am looking to use the Facebook Static Analyzer Flow with my Ionic project. I am new to the different package managers as Ionic uses Webpack. Every tutorial I see for Flow indicates to configure Babel to use it, but it does not appear that Ionic uses Babel. Is there an issue configuring Flow with Ionic 3 with Babel?
All the references I have found for Typescript use either Babel or Webpack, which is why I am not sure that the two can work together.
There are two parts to Flow, the flow binary, and the flow preset for Babel.
You write JS with added flow type annotations, but the flow type annotations would not be acceptable to your JS interpretter (node, browser etc) - so the source files have to be transpiled to remove the Flow type information.
Babel is your transpiler, with the appropriate presets and plugins.
Webpack is used ahead of that chain to marshall other resources to get from source to build/distribution code.
Webpack can be configured with the babel-loader plugin so that Babel is run as the packing proceeds.
The babel-preset-flow is used to transpile the type-annotated code to plain JS.
So, Webpack uses Babel, Babel uses Flow preset.
There is also a comment mode for Flow which allows you to use Flow without having to do any transpiling which might also be a solution to your problem if you can't configure the tool stack to your liking.
I have a question related to karma and ui5.
Current situation is as follows:
I use karma-openui5 and load ui5 via bower. Karma-openui5 simply adds some bootstrap information and the core-file itself:
files.unshift({pattern: ui5path, included: true, watched: false, served: true});
which leads to this head entry:
<script type="text/javascript" src="/base/bower_components/openui5-sap.ui.core/resources/sap-ui-core.js" crossorigin="anonymous"></script>
Ui5 is designed to load everything else related to the core-file but is served by sap in different bower packages this means, request is:
http://localhost:9876/base/bower_components/openui5-sap.ui.core/resources/sap/m/library-preload.js
but it's actually located under
http://localhost:9876/base/bower_components/openui5-sap.m/resources/sap/m/library-preload.js
I could overcome this problem with proxy entries. But i can`t include the .css files which one are in a separate bower package. I can't see a way to proxy only */**/.css requests to another directory. Therefore this way just doesn't work well.
Openui5 has already some middleware (connect-openui5) to resolve this problems and server everything as expected under localhost:XXXX/resources/.
How and can i add custom script tags in karma? like:
<script type="text/javascript" src="resources/sap-ui-core.js"></script>
How can i add a middleware (connect-openui5) to handle all requests to /resources/**/*?
The solution was to use the connect middleware from sap, started with grunt and proxy to this.
I packed everything in a yeoman generator, if anyone is interested in the setup.
https://www.npmjs.com/package/generator-ui5
I have one cli project and one boilerplate project. Now I want to install all babel plugins and presets inside the cli, and use the cli to transpile the boilerplate.
The problem is, I'd like to run cli commands in boilerplate directory, and babel always looks for plugins/presets from boilerplate/node_modules instead of cli/node_modules.
How can I config babel to search only cli/node_modules?
I've tried to set sourceRoot and moduleRoot, but neither work.
You can explicitly pass the resolved plugins, e.g.
transform(code, {
preset: [require('babel-preset-es2015')],
});
I didn't find it in babel docs so asking here.
I want to use babel-rewire-plugin in my nodejs project.
I'm using babel by require hook:
require('babel/register')
and i'm wonder how to add babel-rewire-plugin to be used with this hook.
Does anyone know?
The require hook can take options. Or you can make a .babelrc file.
require('babel/register')({
plugins: ['babel-require-plugin']
});
I'm rewriting my question to be more detailed and more clear.
i have a project like this:
com.mycompany.modulue1
------------------------------------>client
------------------------------------>server
------------------------------------>shared
------------------------------------>module1.gwt.xml
com.mycompany.modulue1
------------------------------------>client (JSNI - create a method to access methods in module2)
------------------------------------>server
------------------------------------>shared
------------------------------------>module2.gwt.xml (using add-linker name="xsiframe")
in module1.html i added the following script:
"script type="text/javascript" language="javascript" src="module2/Module2.nocache.js"
"script type="text/javascript" language="javascript" src="module1/Module1.nocache.js"
now i get "module2" need to be recompiled every time (even if the env. is clean and recently built
the JS method that is defined in module 2 is not defined when the server is up.
i'm using external server in dev mode (for EJB use)
What I'm doing wrong?
Thank you
Ahmad Igbaria
Not sure I fully understand your problem but judging by the title:
If you have a page that loads 2 distinct GWT applications, you can run only one of them in DevMode by subtituting gwt.codesvr in your URL with gwt.codesvr.moduleName, where moduleName is the name of the module to run in DevMode. That way, the other module won't switch to DevMode and will thus run in production mode.
This however only works with the xsiframe linker (for the one module you want to run in Dev Mode at least)
After so much time and headaches, I have found the solution it's very simple, you need to add the linker to both modules not only the one you want to use as a pre-compiled!