Is there a way to use npm packages inside Rust code along with webassembly? Right now using webpack, #wasm-tool/wasm-pack-plugin and wasm_bindgen crate that were already present in this template: https://github.com/rustwasm/rust-webpack-template/tree/master/template
TIA.
Is there a way to use npm packages inside Rust code along with webassembly?
No, with Rust you use crates from https://crates.io/ instead. Your Rust code including its dependencies (the crates) will be compiled to binary webassembly.
Related
What is the best way to use SASS with Client side blazor. I looked into the this
https://github.com/madskristensen/WebCompiler
But it looks like works only with Visual Studio. I am using Visual Studio Code.
As mentioned in the MS docs, you can use the Delegate.SassBuilder package to help you compile sass/scss files to css.
It works pretty well, and very easy to install with no configuration required.
NOTE
For newer Sass build requirements - I've created this LibSassBuilder
I recommend using sass directly from the command line.* Note that:
Dart Sass is the primary implementation of Sass
and it can be installed and used globally as a CLI tool, no npm project or pipeline required is the key.
You can install sass via choco:
choco install sass
Or with with npm:
npm install -g sass
Then you can right click on wwwroot and select Open in terminal and build and watch in native ways enabled by sass. To watch all see the following for instance:
sass --watch .:.
(A bit begrudgingly, but other solutions, like building on every build, has big downsides. Like it building sass resources on every build: That's really wasteful when you've not been messing with your styles ... Or take the fact, in my case right now, that neither the WebCompiler extension nor LibSassBuilder as mentioned above seem to work on this preview version of Visual Studio.)
What is the difference between webpack and npm? Should I be using them both? What are the pros and cons of using webpack and npm? Which one more preferred? Is it necessary to learn webpack when you know npm?
npm and Webpack are two completely different tools that do completely different things.
npm is the default package manager for JavaScript. It is a huge registry of packages for all kind of JS development. It is highly unlikely that you will not need it.
Webpack is a module bundler. It is mostly used to manage JavaScript codebases, most often for usage in the browser, and requires Node.js to use.
To answer question : Webpack (and all its associated plugins) is on npm (https://www.npmjs.com/package/webpack). So, you need to know what npm is and how to use it to use Webpack. But you might not need Webpack. There are other solutions to bundle browser JS code, like Rollup or Parcel.
I'd like to develop a VS Code extension that consumes a COM type library (interop) of a third-party application?
Ideally, I'd like to write the extension in F# (Fsharp) using Fable to compile it to JS, but that's not totally essential. In any case, I can reference and use the COM library from F#, C# and VB.NET and provide a .NET library as a wrapper if needed.
Context: I'm new to VS Code extension development. I managed to compile a hello world extension in JavaScript and in F#+Fable. What I probably don't understand is how to use the package.json file and the npm package manager to reference the library.
Edit: I tried the node.js library winax, but without success. Is there an alternative?
A colleague managed to get Winax (Node.js addon) working within the VS Code extension. It's important to recompile winax against the same version of Node.js and Electron that are used in the current version VS Code. (At the time of writing, VS Code 1.16.0 uses Node.js 7.4.0 and Electron 1.7.3.)
In the command line (in your extension project folder) do
npm install --save winax
cd node_modules\winax
node-gyp configure
node-gyp build
cd ..\..
npm rebuild winax --runtime=electron --target=1.7.3 --disturl=https://atom.io/download/atom-shell --build-from-source
The Electron version may need updating in --target=1.7.3.
Now use Winax in the VS Code extension for instance like this
var winax = require('winax');
var excel = new winax.Object("Excel.Application");
excel.visible = true;
Works like a charm for me =)
The approach is relatively simple. You have to write a native node module. This module is a C++ DLL which you can use to import the typelib for the COM library you want to use. It also can provide an access layer that translates calls from V8 to that COM lib.
I have an online site and Im going to overhaul it. While I cannot find any information about if I can use npm and some kind of package manager (e.g Webpack) on live site which is on shared host (which has latest Node.js, npm support etc), Im going to develope it locally and worry about "publishing" it later on.
Is there a way to somehow covert my current downloaded project to npm project or Im better off just starting a new project? This is rather confusing, I've never used npm before.
Im using WordPress, everything is run with PHP atm but Im going to overhaul it and use Node.js.
NPM can be used to collect and manage Javascript dependencies for the browser so as to create a stand alone front-end JS app. BUT, bower is probably a better choice.
NPM is designed to manage Javascript dependencies for projects that use NodeJS or use the CommonJS module format for requiring modules.
Bower is specifically a package manager (like npm or composer) but it is meant to manage browser based javascript dependencies.
Currently, javascript doesn't have a formally defined module/import system, so a number of competing require() functions are been produced. NodeJS comes with a require() function that searches the npm/ folder for modules. Browserify is a pre-processor that can scan the npm folder for a dependency and all of its dependencies and bundle them into 1 file for a browser to download (because browser's don't have a require() function because the JS standard doesn't have define one)
I might be rambling here, but you should probably look at bower, and then - at some point in the future - look at either browserify or requirejs to combine and optimize all the JS plugins for your front-end app.
Edit for clarity:
Basically there are 2 engines to run your JS application: the browser or NodeJS. NodeJS needs npm, the browser has no idea what npm is. If you want to write a clean, single page app, all JS front-end for a PHP backend, you don't need NodeJS, and therefore don't need npm. Using npm will prematurely complicate the development of a front-end browser app because it will force you to decide on a require() implementation (Browserify or Requirejs) right from the start.
If you follow JetBrains' Getting Started with Node.js in WebStorm instructions, node-express specific code is highlighted correctly. However if you create your own simple node-express project, e.g. using node-express' Guide, then express specific functions such as app.get() are underlined and marked with the following warning:
Unresolved function or method get()
This happens even if you enable the following libraries under Settings\JavaScript\Libraries:
Node.js Globals
Node.js v0.10.31 Core Modules
express-DefinitelyTyped (which you need to download)
How can I configure WebStorm to resolve node-express functions such as app.get()?
Instead of express definitelyTyped, use express types in your project:
npm install --save-dev #types/express
Alternatively, for yarn users:
yarn add --dev #types/express
This worked great for me.
TL;DR:
you go to Settings/Preferences --> Languages and Frameworks --> JavaScript --> Libraries, click the Download button on the right, then select "express" (or any other library you need) and click Download and Install.
Enabling express-DefinitelyTyped typescript library for Express project does work for me - app.get() is successfully resolved. Adding typescript stubs is the only possible workaround, as WebStorm can't understand the way express is defined - see https://youtrack.jetbrains.com/issue/WEB-6667#comment=27-470393
If adding typescript stubs doesn't work for you, please try invalidating caches. If this doesn't help, I'd suggest contacting jetbrains support, providing a sample project