I'm testing the new code editor from Microsoft : Visual Studio Code.
I'm under Windows 7 and i'm trying this example : https://code.visualstudio.com/Docs/nodejs
But when i try to add /// <reference path="/typings/node/node.d.ts"/>
like it is said in the example. It does'nt work. The file is never downloaded and i don't know where i can find it.
Is someone knows how to fix that ? Is it a bug or the problem come from my machine ?
TSD is TypeScript Definition, while TypeScript is a typed superset of JavaScript from Microsoft that compiles to plain JavaScript. You don't need to understand these if you just want to use VSCode to develop common JavaScript-based node.js projects like me.
To solve your problem, I think a better way is to install the TSD package manager as a global module. This will enable you to use the command tsd globally.
npm install tsd#next -g
Then go to the root folder of your project, and type
tsd install node
This will automatically create a folder 'typings/node' with a .ts file named 'node.d'.
If you also need IntelliSense for third party modules like express.js or async.js, you can just add them by yourself
tsd install express
Just like 'npm' which you already be familiar with is the package manager for node.js, 'tsd' is the package manager for TypeScript Definition (but not for TypeScript itself)
There's a list here showing the available repositories.
http://definitelytyped.org/tsd/
Once you download all the .tsd files into the 'typings' folder, you still have to manually put these special comments at the beginning of each .js files to help VSCode look up the definitions for node and express, so now VSCode knows the API details of the classes and functions.
/// <reference path="typings/node/node.d.ts"/>
/// <reference path="typings/express/express.d.ts"/>
I just tried last night and it worked fine.
You shouldn't put the reference by yourself. You should let VS Code do it for you by pressing "Ctrl + ." (thats the dot key you should press) on the marked __dirname and choosing the option for the TypeScript Definition file as said on the website.
VS Code will create the directories structure under your project folder, download the file and add the reference to your app.js express application.
I had the same problem with angular and this is how I got it to work for me: It looks like the problem was that VSCode failed to download the file and create the directories. I googled angular.d.ts and found it on GitHub - DefinitelyTyped
I created "typings/angularj/" folders and added the file and now intellisense is working for angular :)
So just grab the "node.d.ts" file instead of from DefinitelyTyped and it should work for you as well.
As #HenryLi mentioned, you need to get a file with type definitions for Node. However TSD has been deprecated for quite a while now. Worry not, however! Now the type definitions are managed directly by Microsoft and bundled right through npm!
To solve your problem, it's enough to run this command:
npm install --save -g #types/node
(Edit: VS Code needs me to open a directory, and not a single file to let intellisense work well)
Same problem for me.
This does not work:
Add /// reference to 'node/node.d.ts'
Nothing happens...
But this does work, VS Code is responding. (Edit: stops the warning, but no auto-completion this way):
Mark '__dirname' as global
Related
I tried so but I have a 'require is not defined' error. I can't find information about that, can someone enlighten the noob in me please?
It's possible, but you have to be careful. Trying to require() a package means that node will try to locate its files in your file system. A chrome extension only has access to the files you declare in the manifest, not your filesystem.
To get around this, use a module bundler like Webpack, which will generate a single javascript file containing all code for all packages included through require(). You will have to generate a separate module for each component of your chrome extension (e.g. one for the background page, one for content scripts, one for the popup) and declare each generated module in your manifest.
To avoid trying to setup your build system to make using require() possible, I suggest starting with a boilerplate project. You can check out my extension to see how I do it.
An updated answer for 2022
Short answer: yes, you can require/import packages. Rather than going through the tedious work of setting up & configuring a bundler like Webpack on your own (especially if you have no experience with them), there are now build tools you can use to create the boilerplate "scaffolding" for a Chrome extension:
Extension CLI -- this one is well-documented and you can also reference the source code of some Chrome extensions that have used this tool (READ: learn how others have set up their code).
Chrome Extension CLI
Benefits of using them:
New projects are initiated with a default project file structure. Super helpful.
They support modern Javascript (ES6, ES2021), so modules work fine.
They already have bundlers integrated and pre-configured (Webpack in both above cases I think). You therefore don't need to install and configure any on your own.
You can use npm as normal to install any packages/dependencies you need.
Then of course, let the official documentation for Chrome Extensions guide you through the rest.
It's not possible to require node modules directly within a chrome extension. However, it is possible to bundle node applications and packages into the browser for use with your extensions. See here for more: Is it possible to develop Google Chrome extensions using node.js?
Yes, It is possible with esm npm packages.
require is commonjs module loader.
Browser doesn't support commonjs modules system
so that this error showed.
Method 1:
Run npm init -y and add "type" :"module" in your package.json.
create path.js file
add this line in path.js
const fullPath = await import.meta.resolve("npm-pkg-name");
const path = fullPath?.match(/(/node_modules.*)/)[0];
console.log(path);
add this line inside package.json
"path": "node --experimental-import-meta-resolve path.js",
Copy console output text. Replace package name with this copied path.
Method 2:
Install other npm package to find and replace
npm packages' virtual path to real path so that chrome browser will find it.
Install Path-fixxer
Add this line in path.js
import setAllPkgPath from "path-fixxer";
setAllPkgPath();
then run command : npm run path.
Now open browser to test it.
I'm building a .Net Core application using Angular for my client-side code. For the most part, I'm using the default template that is included in VS 2017. For whatever reason, VS is making my node_modules folder read only. Before I was able to install packages via command line in the directory that holds my client side code as well as my package.json file and my node_modules folder. Before I was able to do this, but now it is defaulting the folder to read only which is invaliding all of my npm commands. I've verified that this is the case because I can remove the read only attribute via windows explorer and then run any of my commands like npm install.
Has anyone else encountered this before? If so, what did you do to resolve this?
Thanks!
Okay, I found the answer. VS puts a lock on the node_modules folder while it is running.
So, I guess for now if you need to add packages just close VS first.
I have developed a nodejs project as an umd library, with the purpose to use it in a another nodejs project. The library project builds fine and generates the index.js file and index.min.js file.
But when I tried installing the library project locally using npm install "asolute path". It brings all the things in the library project. And the size of my project I want to use the library project grew. Seems it is because of all the files in library project is getting copied.
Thanks for any help in advance.
Have you added an .npmignore file?
Also, you'll probably want to use npm link for local development.
I tried so but I have a 'require is not defined' error. I can't find information about that, can someone enlighten the noob in me please?
It's possible, but you have to be careful. Trying to require() a package means that node will try to locate its files in your file system. A chrome extension only has access to the files you declare in the manifest, not your filesystem.
To get around this, use a module bundler like Webpack, which will generate a single javascript file containing all code for all packages included through require(). You will have to generate a separate module for each component of your chrome extension (e.g. one for the background page, one for content scripts, one for the popup) and declare each generated module in your manifest.
To avoid trying to setup your build system to make using require() possible, I suggest starting with a boilerplate project. You can check out my extension to see how I do it.
An updated answer for 2022
Short answer: yes, you can require/import packages. Rather than going through the tedious work of setting up & configuring a bundler like Webpack on your own (especially if you have no experience with them), there are now build tools you can use to create the boilerplate "scaffolding" for a Chrome extension:
Extension CLI -- this one is well-documented and you can also reference the source code of some Chrome extensions that have used this tool (READ: learn how others have set up their code).
Chrome Extension CLI
Benefits of using them:
New projects are initiated with a default project file structure. Super helpful.
They support modern Javascript (ES6, ES2021), so modules work fine.
They already have bundlers integrated and pre-configured (Webpack in both above cases I think). You therefore don't need to install and configure any on your own.
You can use npm as normal to install any packages/dependencies you need.
Then of course, let the official documentation for Chrome Extensions guide you through the rest.
It's not possible to require node modules directly within a chrome extension. However, it is possible to bundle node applications and packages into the browser for use with your extensions. See here for more: Is it possible to develop Google Chrome extensions using node.js?
Yes, It is possible with esm npm packages.
require is commonjs module loader.
Browser doesn't support commonjs modules system
so that this error showed.
Method 1:
Run npm init -y and add "type" :"module" in your package.json.
create path.js file
add this line in path.js
const fullPath = await import.meta.resolve("npm-pkg-name");
const path = fullPath?.match(/(/node_modules.*)/)[0];
console.log(path);
add this line inside package.json
"path": "node --experimental-import-meta-resolve path.js",
Copy console output text. Replace package name with this copied path.
Method 2:
Install other npm package to find and replace
npm packages' virtual path to real path so that chrome browser will find it.
Install Path-fixxer
Add this line in path.js
import setAllPkgPath from "path-fixxer";
setAllPkgPath();
then run command : npm run path.
Now open browser to test it.
I used the steps explained in this page: http://nodejs.org/api/addons.html and successfully created a addon.node file using the node-gyp tool. it works fine and it's a wrapper of a c++ static library.
Now I want to distribute this, I created the package.json file using:
npm init
and test it using "npm install . -g" but it tries to recompile the module which will be difficult to achieve because it will require the libraries that I'm embedding into the .node file, is it possible to distribute the .node file that I already compiled in my system?
How can I include the compiled .node file into the npm package and upload it to the npm registry. I'm sure I'm just one step to made it, but I dont know where to start.
I read about the dependencies, but seems that it's suited when your module depends on other modules, and not with your own .node file.
Thanks for your help.
ok, I finally did what I wanted to achieve, here're the options in case someone else needs this:
To avoid the compilation you could create a new folder and copy the package.json in there, along with the .node file, I didn't find this, just tried and it worked.
Provide the required libraries to allow the user his own compilation.
Although the first one worked well, I will need to create a package for windows, linux, mac, etc. Which looks very odd to say: "if you are in linux use: npm install xxx-linux", so I decided to adjust my library to allow the user the module compilation.
To do this I created a "client-dev" installer that has the required libraries precompiled, as long as the include headers required, then created the node module to be compiled using the preinstalled libraries and headers. I will need to add a help in my website to explain that, in order to install the module, the user will need to install the dependencies first using apt-get, windows installer, or mac pkg.
Although this works for me, I don't know if that will be maintainable in the long run, but I didn't find a better way to do this. (the only link that finally enlightened my goal was one saying: "if you're going to use node modules with precompiled libraries you will have nightmares", anyway... I prefer that instead of doing a full implementation in node js from scratch and maintain version for java, c#, nodejs, php, etc.