I have a JS application that is bundled using webpack. It is mostly VueJs, with some jQuery and raw JS. It calls in a number of libraries and uses some ES6 features.
I think webpack is transpiling down to ES5, but I am not 100% sure. I would like to be able to check the output JS, to find out if it is definitely ES5 or lower. How can I do that?
I tried this node module, https://www.npmjs.com/package/es-check, but could not get any sense out of it. It keeps saying that it can't find any files to check.
A simple solution could be to use grep or similar on the bundle and search for any of these:
cat bundle.js | grep =\>
arrow function =\>
declarations let\ const\
Related
I am in the middle of converting a Polymer 2 app to Polymer 3. Modulizer did not work for me so I converted it manually. Thanks to the great upgrade guide it has been mostly straight forward so far.
One task is left though:
in my Polymer 2 app I had a special html import (d3-import.html) that brought in the d3.js lib version 3 which comes as a plain JavaScript file (no ES6 module!). This import was dynamically loaded in only two out of overall 20 pages because the other 18 pages did not need it.
In Polymer 3 I can not import it as an ES6 module because it is not a module. Loading it in my main start.html would mean it gets loaded even if the user only uses the other 18 pages that don't need it.
I tried writing script-tags in my web component templates but that doesn't seem to work. Unfortunately I don't see any error in the browser tools. The template simply stops to load at the line of the script-tags.
Any idea how to do this?
Additional question:
since I start using lit-element in the same application. How to solve the same problem with lit-element?
Edit: note that I currently don't use any build steps/tools except for polymer-build to replace the module paths with actual file paths.
Note that this challenge has nothing to do with Polymer or LitElement, this is only an issue with how to load non-module resources from a module.
The most straightforward way that I know of is to use a bundler like Rollup that can support CommonJS or UMD. Rollup has the commonjs plugin for this: https://github.com/rollup/plugins/tree/master/packages/commonjs
The other option is to upgrade to D3 5.x, which appears to be published as standard modules itself. Given the number of files involved, you'll still likely want a bundler to reduce network roundtrips.
I would like to use the ECMAScript 6 module system in a front-end project, so that the interdependencies of the code were more clear than simply loading "all that might be needed" up front, in the HTML.
However, having the following line in the main JavaScript file does not work:
import fuzLogin from 'fuzLogin'
The error in the browser's console is: can't find variable: require
The compiled code (created by Babel) is:
var _fuzLogin = require("fuzLogin");
var _fuzLogin2 = _interopRequireDefault(_fuzLogin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Is ECMAScript 6 module system supposed to work, for compiled code, with WebStorm 10?
Should I maybe add some external dependency in my HTML, to provide the missing require?
Are there other ways I could reach a modular front-end orchestration of my JavaScript side?
I think that you're babel configuration is set up to use commonjs that transpiles with require (requirejs)... so, in order to work with that configuration you need to include requirejs: http://requirejs.org/
I found two ways that fulfil what I was looking for, in slightly different ways:
jspm
Rollup
JSPM allows on-the-fly loading of ES2015 modules, so that the transpiling happens in the browser. This is pretty awesome, really, and something I wasn't expecting.
In addition, JSPM also provides traditional build tools for doing the bundling for production.
But I actually chose to go with Rollup.
Rollup gathers all kinds of build systems together, and is based on ES2015 packaging, providing what I was after. Most important for me were the brilliant blog posts by Jason Lengstorf (just 1 and 2 weeks old, btw) that walk one through the whole practical setup.
References:
jspm-trial (GitHub) repo that I did, experimenting these things
Smaller, More Efficient JavaScript Bundling Using Rollup (blog, Aug 2016)
I have an existing web UI that I would like to be able to call a function written in ClojureScript. The function would be in a separate ClojureScript module (cs_func.js file) that does not need access to the DOM. I can't find any examples on how to do this.
Yes, this is possible (cf. how to use a complex return object from clojurescript in javascript… for instance). As you already figured out, ClojureScript will be compiled to normal JavaScript files (where "normal" varies according to your cljsbuild settings on how aggressive the output will be optimized). This is more a Javascript question on how to access the compiled JavaScript module than anything else.
You should be aware, however, that the output from cljsbuild might get mingled and that you probably want to prohibit this for your entrypoints, cf. the discussion in the section "Exporting ClojureScript functions" in this article on ClojureScript/JavaScript interop and the even more detailed discussion in Luke VanderHarts article on using JavaScript and ClojureScript
I have the following problem: phpstorm do not recognize jquery methods and here and there I see
Unresolved function or method $()
This was bugging me for sometime but finally I tried to get rid of it with File->Settings->JavaScript->Libraries and adding jquery as a global / project.
My library setup looks like this:
But is has not changed anything. I still see those pesky notices. Does anyone know how to get rid of them?
There is a really stupid workaround,
Download the Library (in this case jQuery) from inside the IDE itself.
Open up settings (Ctrl + Alt + S on Linux)
Navigate to Languages & Frameworks -> Javascript -> Libraries
Click Download and choose jQuery
Hopefully the errors will vanish
EDIT:
After running the IDE through Fiddler, I realised this only solves the problem because of the version the IDE downloads.
So, the correct workaround is to Add older, non-AMD jQuery versions as a Global scoped Library and add the latest one as a Project scope library.
The latest non-AMD versions are:
1.10.2 for 1.x series. And, 2.0.0 for 2.x series.
I had the same issue with version 1.11.2, and resolved it simply by adding the uncompressed version into my js folder.
Just copy the uncompressed version of jQuery into your project folder.
you don't even need to import it into your project, just copy it to javascript folder.
The jQuery v1.11.0 shows exactly the same behaviour here as well. At the same time previous version 1.10.2 works fine in IDE (no warnings).
I think it has something to do with "AMD-fy jQuery source" ticket (http://bugs.jquery.com/ticket/14113) -- looks like IDE has some issues figuring out this style.
If you wish (and can) -- roll back to jQuery v1.10.2 (which is like half a year old, which means it's stable and still good to use).
Hopefully IDE will be able to properly parse this new jQuery style in next release.
Actual ticket: http://youtrack.jetbrains.com/issue/WEB-10908
If you import both 1.11.0 and 1.10.2 in phpstorm it will be resolved
You don't have to rollback your project.
So for a particular CGI perl script I have included JSON like this to handle some .json files:
use lib "./modules/JSON/lib";
use JSON;
This works fine and well. The web directory holds the files required in the modules folder.
However, the JSON module is very slow. I read that JSON:XS can be much, much faster but I can't seem to simply use it as so:
use lib "./modules/JSON-XS";
use JSON::XS;
There is no lib folder in the JSON-XS files, i've tried combinations of use (ie, using both folders and etc) but it didn't work.
And no I cannot simply install the module for this particular project.
Any help is appreciated.
And no I cannot simply install the module for this particular project.
You can't use a module without installing it. You've just been getting away with doing a half-assed job of it. That won't work for JSON::XS, though. The reason it's fast is because it's written in C, so you'll need to compile the C code. The easiest way by far to do this is to use the provided installer instead of reinventing the wheel.
(You do know you can install a module into any directory, and that this does not require special permissions, right?)
Perl distributions are usually usable in an uninstalled state. What you just need to do is to call perl Makefile.PL && make (or for a Module::Build-based distribution: perl Build.PL && ./Build). This will do all necessary compilations (if it's an XS module) and copy the library files into the blib subdirectory. In your script instead of use lib you would write use blib:
use blib "/path/to/JSON-XS";
Note that if a module has dependencies, then you have to resolve it yourself and add that many use blib statements. JSON::XS does not have that many dependencies, but it will be really inconvenient for other modules. In this case you should probably seek another solution, e.g. using CPAN.pm together with local::lib.
Okay this finally worked for me:
I did this process to all the dependencies (in the order of no dependencies to more dependencies)
export PERL5LIB = ~/path/to/modules/perl5
perl Makefile.PL PREFIX=$PERL5LIB LIB=$PERL5LIB
make
make test
make install
This installed all modules into a directory I called perl5. It also means that when you try to install other modules locally the dependencies issue does not appear due to the PREFIX/LIB additions.
Then all I did was add this to my perl CGI script:
use lib "./modules/perl5";
use JSON::XS;
PS: JSON::XS is so much faster!
:D