I have a project where I use deck.gl to create web maps. It works fine, however, I need the functionality of drawing polygons and, for that, the deck.gl documentation tells me to use nebula.gl. The sample of the functionality that I need can be found here: https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs?file=/app.js
The problem that I have is that on the nebula.gl documentation there's no library compiled to be used on a <script> tag. They only work with the library installed through npm or yarn, then the only way I managed to make it work so far was by compiling the entire project with webpack... In my specific case, I'd like to avoid compiling the entire project and I'd prefer using a compiled js file with the <script> tag.
Is it possible to compile npm libraries with webpack into a single js file? Just so I can use this nebula.gl library with a <script> tag on my webpage? Or am I misinterpreting the way I should be using webpack?
Related
I'd like to integrate VueJS through WebPack in one of my custom Odoo modules, and have it start up automatically when I launch Odoo-bin.
Does anyone have a solution?
Is it even possible?
I know you can include VueJS as a simple .JS file in the module's template, but that means I can't use the .vue components supported by WebPack.
I also read that Odoo has its own JS framework, but I couldn't find good tutorials/documentation for it.
EDIT: To anyone that might be wondering how I solved this, here's what I did:
I initialized a package.json file in the root of my Odoo folder using npm init. I added a start script to the package that launches webpack and bundles all vue components in myAddons folder (where I store my custom modules), then launches Odoo through the python odoo-bin ... command. All that's left is to use npm start to start it all up.
This way, the vue components get bundled into single JS files, that I then add to the templates of my modules. This has a small inconvenient in that the first bundle has to be done manually in order to know which JS files need to be imported to the templates. Also, i'm still trying to figure out how to bundle the components of every single module separately. Will update this once I find a proper way to do it. ...Hopefully.
By default, odoo frontend part is heavily built upon backbone, jquery, underscore. If you want to use any other JS library, you have to make sure the compatibility in between them. The odoo backend parts of JS functionalities are written under web module can be found in odoo/addons/web/static/src/js directory in odoo community codes. The ecommerce/website part is under website* modules.
Along with the fact that the Odoo JS API documentation is basically non-existent (as of the time I am posting this) .. I would add the fact that its going to be like working with a moving target compared to calling Odoo's JSON-RPC API directly since their JSON-RPC API changes very little over different versions of Odoo.
Moreover, making JSON-RPC API calls with Axios is extremely simple. So just go directly to the server's JSON-RPC API from your Vue project.
This is what I am doing with at odooinvue.org which is basically a Vue project that uses Odoo in the back-end. That project is designed specifically as a resource for Vue developers that are trying to use Odoo in the back-end but have difficulty because they are new to Odoo development.
I suggest trying #StartupGuy's odooinvue, which is really nice.
With Odoo 14 they created a new modern frontend framework: Owl framework.
I have not tried it myself.
I am installing vue.js by CLI, and there i have found the command such as
vue init template-name project-name
Thus, I want to know that what are these templates and how many of these are there which will be appropriate for me?
Well, i looked up and researched and found that there are, different versions for templates in Vue, if you are using it by Cli.
Templates are such as:-
webpack
webpack-simple
pwa
simple
browserify
browserify-simple
in which webpack is used mostly. since it provides some css extraction and more features too
Generally developers who are new to any framework, mainly use webpack-simple that sets up all things for them regarding gulp, eslintrc and much more files.
I am using the Aurelia CLI for creating a SPA and it makes everything a lot easier compared to using Jspm.
However now we have some custom elements like: <my-custom-element></my-custom-element> that we want to package into an npm package so we can use it in multiple/other Aurelia CLI projects.
How would I go about creating it? I can't find any examples or documentation about this.
My guess is that I need to transpile my custom element files so that I end up with an npm package containing .js files (we use typescript) and the correct module loader synax (CommonJS?)?
My understanding is that I can't simply create an npm package that contains my my-custom.element.ts + my-custom-element.html file since it all needs to be transpiled, bundled and so on.
I am also guessing that I can't simply do an au build and use my bundles since that would bundle the entire SPA and not just my custom element files?
So what steps do I need to perform to create an npm package that contains a custom element that can be added to my Aurelia CLI project?
Any help or samples would be very welcome! Thank you!
There are a heap of ways you can do this. However, to keep things simple I am going to recommend the official Aurelia plugin skeleton for developing plugins, which you can get on Github here. If you venture into the src folder, you'll see a very basic example of a custom element and how you can make it global. The plugin skeleton uses Gulp for build tasks, which can be found in the build/tasks directory.
At present, you cannot use the Aurelia CLI to create a plugin. But in the future, you will most likely see this feature added into the CLI as it becomes more than just a CLI for creating applications.
I'm learning angular2 and I have seen the gulp-sourcemaps plugin used in the angular2-quickstart project. My question is general, why we use the gulp-sourcemaps? In what circumstances I should use this plugin?
It automatically creates source maps from your code. A source map is used to tell you which file and line in your original code a part of minified code comes from. So sourcemaps can be very helpful when debugging minified Angular apps in the browser.
I am using gulp for the build system, bootstrap-styl as UX framework, and browserify as js bundler.
I need to store into a configuration file the different screen sizes used by media queries.
Stylus and the javascript application need to use these values.
Is there a plugin for building that ?
I have found for grunt-shared-config, is there an equivalent for gulp ?
You can use json bif for that.