I know I can require a file in ES6 like this:
require('./config/auth');
When I try to do this
require('./config/');
I get: Module not found: Error: Cannot resolve directory './config'. Why does this happen? How can I require a directory?
First of all, your requires are in NodeJS/io.js syntax, module in ES6 syntax looks like this:
import "./config/auth";
Or if you want to load something from it:
import authenticate from "./config/auth";
You can't load whole directories at once, but in Node/io.js you can create a module and then load that.
Note that as a workaround you can load a single file that in turn loads multiple files and returns their results. There is also work in progress on an asynchronous loader but that changes so often it's hard to keep track so I wouldn't rely on it just yet.
I personally use a package called require-dir. This should work for you:
import requireDir from 'require-dir';
requireDir('./config');
Related
Im working on a project that uses i18next with react and typescript, where translationkeys are defined in .json files.
One drawback of switching to json for the translation files, is that we can no longer use the intellij idea "Go to declaration" or ctrl + left-click feature, to quickly navigate from a key usage in typescript, to its declaration in the json file.
Is there any way to enable this without requiring all developers to download some third-party intellij plugin?
I've googled for hours for any information about this.
I've made a d.ts file to enable strong typing for where translationkeys are used. What strikes me as odd is that intellij/typescript is able to know when a key doesent exist and warns about it, but at the same time doesent know "where" that key exists whenever i type a correct key.
I also set resolveJsonModule:true in tsconfig, but to my limited understanding it doesent seem relevant.
This is not technically possible because commands like Go To Declaration will look for a declaration in a source code file (think .ts or .js or .d.ts) whereas you want to go ...to its declaration in the json file.
The resolveJsonModule flag won't help you either because as per the docs:
Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. This includes generating a type for the import based on the static JSON shape.
One possible solution is to create a build script to take your .json file and output a .js or .ts file containing the same content, then IDE commands like Go To Declaration will jump to that file.
In summary: you will need some kind of plugin, or a custom build script.
DISCLAIMER: I don't use i18next or react, this answer is based on my understanding of both TypeScript and the JetBrains Rider IDE (which is like IntelliJ).
Will importing local json/text like the following I have written below be async or sync in Create-React-App?
import SampleLocalJson from './sample/sampleJson.json'
This depends on your environment. If you are using webpack >=v2.0.0 (which you probably do if the above line works) this will be done automatically by webpack json-loader during build time and is therefore sync.
If you are not on webpack >=v2.0.0 there can be multiple issues with directly importing json. Here is a good thread about it: How to import a json file in ecmascript 6?
UPDATE
If you are interested in lazy loading the json, there is support for that built in to webpack. They have a good example in their documentation on that.
This is handled by webpack during the build time. That JSON becomes part of your bundle file shipped to the browser.
I came across two ways to import local json files to my code.
Using angulars http get.
Thats well known for loading json input. You can switch easily from remote to local json files.
Typescript require
Another way to load json in typescript files is via require. This is simple as I don't have to deal with Promises/Observables. I just include them like this:
data: any = require('assets/json/my.json');
I want to know something about the advantages and disadvantages between these two approaches. Is there a prefered way and why?
Hi it depends on your requirement.
If your file is constant, will not be changed then it is best option is to use .require()
- .require() will cache your file, and when you import again it will give the cached file, so it might be bad option you want current time data because you will not get the updated data from that file
But if your file is getting updated then you have to use HTTP.
ES6 newbie here. Maybe it's an easy question, but haven't found any useful info on this. I have modals.js file and modals folder in actions directory.
How can I tell javascript whether I want to import a file or a folder if they have same name?
My expectation is that:
import {...} from './actions/modals'
Can be treated either as modals.js file or modals/index.js. Is there any widely spread solution that will work on any bundler, that will guarantee what exactly do I require?
I understand that I can try to use '.js' extension like:
import {...} from './actions/modals.js'
But my research shown that not all builders support file extension.
I would really appreciate your help in my ES6 learning
Combining everything that was mentioned in the comments I've ended up in a way to always specify either / in the end if I refer to a folder or .js if I refer to specific file.
i am building an extension to parse json using vs code extension.
so my need is ,it should be able able to load .json file from a particular folder and iterate through content of the file.
Then it should allow user to select few keys from it make a new json file out of this and save it in any folder.
But i am not able to find any way to read and write files in "vs code extension".Could someone please help me.
If you want to read the current edit state of a file you can use the following API workspace function:
vscode.workspace.openTextDocument(uri).then((document) => {
let text = document.getText();
});
This will show you the current state of the file including unpersisted changes. document is of type TextDocument and has isDirty set to true if it has pending changes.
Since the extension runs in nodejs, you should be able to use any nodejs module built-in or installed by npm in the usual way.
For your purpose you will be OK with the built-in fs module: https://nodejs.org/dist/latest-v6.x/docs/api/fs.html
In your extension you will need to import the required module, so your code file should contain this:
let fs = require("fs");
and then use the methods in the usual way, eg. fs.fileReadSync( filename, encoding ) ...
Please not that there is one exception. If you install a nodejs module containing compiled, binary code, it will not run in the extension and instead you will see an error message saying something like %1 is not a valid Win32 application. Pure javascript modules are OK, though.
VSCode extensions are running in node.js. Therefore you can use any available node.js package/module within your extension. For instance, check out this question for reading JSON.
For JSON, you just need to require or import the JSON file, such as:
const jsonObject = require('./myJSONfile.json');
// do something
For JSON with comments, you can use node-jsonc-parser.
After the manipulation, you could use the fs module of nodej.js to write to the disk.