Using Babel in Production - How to precompile scripts - oracle

I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?

Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine

Related

Hyperledger composer generator: Trying to copy from a source that doesn't exist (no concepts support for Angular)

I have a composer-rest-server running on localhost:3000. To go with that, I tried to generate an Angular 2 app using yo hyperledger-composer. My business network models also have a abstract concept Spray{...} present.
I believe the documentation is outdated as I was presented with slightly different options than on the documentation. After choosing Angular and following through the steps, I got an
AssertionError: Trying to copy from source that does not exist ... /concept/concept.component.ts
Based on some quick google searches, I was able to find this issue on their Github - https://github.com/hyperledger/composer/issues/3927 however in my case, I am not even able to build the Angular app so I don't even get to the compilation stage.
Is there any way to build the app right now where it's at?
I've created a Github issue explaining steps to reproduce this and also included a hacky fix which is to comment out the lines in the generator code which copy over the concept files.
Link - https://github.com/hyperledger/composer/issues/4328

Laravel Homestead: Failed to mount component: template or render function not defined error

This problem is driving me mad, I have been researching and have read about the standalone and runtime version of Vue. As far as I can tell Laravel 5.4/homestead ships with the standalone version as default.
The Vue development tools in chrome show the example component so I think that part is working correctly, just cannot render the template.
I am relatively new to Vue and npm been stuck in the past with jQuery, firstly where in laravel can I check/set I want the stand alone version of Vue? If it is not that problem does any one have any ideas?
Thanks for help
VueJS supports two ways of building apps like you said.
Load all necessary scripts within your page via script tags (not combined .vue files).
Compile and bundle all your files with Gulp, Browserify, Webpack or other tools.
Can you explain what you did so far. I guess you don't compile everything down.
The comment by peaceman was the solution, I had multiple calls to elixir, I condensed down to one and it worked straight away. Thanks everyone for your help.

How to use webpack for development Angular2 / typescript without running build each time?

I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.

Configuration Babel for Webstorm 11 on Windows

I'm having trouble getting Babel to work on my current installation of Webstorm 11 on Windows. For some background I'm currently using Webstorm to do Angular development with a Microsoft MVC project (constraints of the project). For the most part it has gone well but I've wanted to move to es2015. I'm already using node package manager and the LESS transpiler with no issues. In trying to figure out what to install I went through a number of packages:
Babel
Babel-cli
Grunt-cli
Grunt-babel
Babel-preset-es2015
It this stage I'm okay with not using grunt; I just want to get a file to transpile before moving on to that. I actually have Webstorm thinking the file watcher is there but it doesn't actually transpile the code. I figured out es2015 was no longer on by default so I installed the last preset and it totally through my machine into a grind of processing tasks that maxes out my machine and only ended with an exception looking trying to for path under my project. That path is indeed valid. If I re-enable the file watcher it will max out my machine again.
All these seems pretty abnormal to me given I just want to enable the damn es2015 processing. Somewhere I'm obviously doing something wrong so I'm hoping someone can give me some input in what I truly to setup Babel properly.
Thanks!
Sieg

How to use webstorm 11 to debug meteor 1.2 application with ecmascript package

After recently updating my project to meteor 1.2 and including the new ecmascript package (to use ES2015 features), I realized that my server debug breakpoints will never run, no matter what I do.
After reading about different ES6 posts on meteor forums and jetbrains , I tried setting up file watchers to create sourcemaps, but:
meteor complains about the generated files(so you have to move them to special folders in order to keep going)
It still doesn't work :(
Setting up spy-js also didn't work (never tried before so maybe I did it wrong)
I could reproduce the problem with the basic TODOs application and debugging with default options.
It is fixed for now in EAP 11 builds.
Known issue, please follow WEB-18074 for updates. Unfortunately I can't offer any workarounds:(

Resources