Is there a way to add the NPM NodeJS External modules so my node project modules appear in 'External Libraries' and are resolved by code completion and navigate?
Thanks
Yes, besides enabling code completion in Settings (Ctrl + Alt + S) > Languages and Frameworks > Node.js after downloading it via the Settings > Plugins section, You have to actually install the Node.js kind of manually.
First, create a basic package.json file containing all the config info needed to install Node.js,
for more info look here: https://nodejs.dev/learn/the-package-json-guide
After you've done that, simply open up the terminal emulator (Alt + f12) and type in npm install.
As long as you have the package.json file in the same directory, everything should work fine, and your IDE - webstorm in this case, should add Node's external modules automatically,to the External libraries > Node.js core section in your project tab.
Cheers.
on webstorm go to:
file
settings
javascript
libraries
download or add
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 have never work in any vscode extension neither witch nodejs/npm
im trying to compile this extension:
gutter-preview
I have download nodejs, installed, then i download the extension source, open cmd:
cd 'folder where is the extension src' > npm install package.json
it installed and created a folder node_modules
am i doing it correctly? what's the next steps?
The easiest way will be from the extension directory in your VSCode, you can open that using one of these three ways:
a. View > Extension
b. From sidebar, click on extension icon
c. CTRL + Shift + x
Then search for "gutter preview" with quotations, you'll get one result called Image Preview, that's the extension, just click on install.
Another way is visit this url
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview.
Then press on 'Download Extension' on the right hand side, download the file then inside your vscode open the command pallet (CTRL + Shift + p) and type:
extensions install from vsix, click that command, then choose the .VSIX file you just downloaded.
And last if you must do it from the github repo, then inside the directory where you ran npm install and found the node_modules directory, run npm run webpack-prod (a command specified in the package.json file in the root of the project folder, which describes how to build the app). Then you should find a .VSIX file in the ./dist/extension directory in the project, and you apply step 2 on the generated .VSIX file
The process to follow is the same like for any extension development. When you have the code ready to build the extension package follow the publishing guidelines.
However, instead of really publishing the downloaded extension you would just build the package using:
vsce package (see also the Usage section on this page)
If you need to debug the extension code follow the Your First Extension page (jumping over the sections that explain how to create the initial extension code). See also the follow up pages like Extension Anatomy, which explain more details you might need.
I am trying to use CKEditor for strapi project, but failing to integrate.
What I did so far:
strapi new cms --quickstart It is starting me new cms application.
npm install ckeditor
Edit the code located at ./plugins/content-manager/admin/src/component/Edit/index.js to CKEditor implementation
npm run build to see my changes, tried npm run setup too
But here I'm getting error webpackJsonp is not defined
I'm not providing the code how I modified, because, build command is not reaching till there.
I appreciate any help you can provide
In order to change the default WYSIWYG in Strapi you will need to
Fork the repository check out the CONTRIBUTING GUIDE
Once you have the development setup you can directly modify the code in packages/strapi-plugin-content-manager/admin/src/components/WYSIWYGWithErrors and its related children. Install the dependency in strapi-admin
Uninstall the content manager plugin (again make sure you are running the latest version of Strapi
Copy the strapi-plugin-content-manager package inside your app's plugin folder (rename it content-manager)
Copy the following file in my-app/admin/src/plugins.js and change the paths of the plugins so it matches your new one
run yarn develop
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.