Here is my first file:
var self = this; var config = { 'confvar': 'configval' };
I want this configuration variable in another file, so I have done this in another file:
conf = require('./conf'); url = conf.config.confvar;
But it gives me an error.
TypeError: Cannot read property 'confvar' of undefined
What can I do?
To import a variable from another file in JavaScript:Export the variable from file A , e.g. export const str = 'Hello world' . Import the variable in file B as import { str } from './another-file.
In JavaScript, variables can be accessed from another file using the <script> tags or the import or export statement.
The extern keyword is used to indicate that the variable can be accessed by another file. It's name is visible globally.
To import a variable from another file in React:Export the variable from file A , e.g. export const str = 'hello world' . Import the variable in file B as import {str} from './another-file' .
Since Node.js version 8.9.0, you can also use ECMAScript Modules with varying levels of support. The documentation.
--experimental-modules
Node.js will treat the following as ES modules when passed to node as the initial input, or when referenced by import statements within ES module code:
- Files ending in
.mjs
.- Files ending in
.js
when the nearest parentpackage.json
file contains a top-level field"type"
with a value of"module"
.- Strings passed in as an argument to
--eval
or--input-type=module
.
Once you have it setup, you can use import
and export
.
Using the example above, there are two approaches you can take
// This is a named export of variableName export const variableName = 'variableValue' // Alternatively, you could have exported it as a default. // For sake of explanation, I'm wrapping the variable in an object // but it is not necessary. // You can actually omit declaring what variableName is here. // { variableName } is equivalent to { variableName: variableName } in this case. export default { variableName: variableName }
// There are three ways of importing. // If you need access to a non-default export, then // you use { nameOfExportedVariable } import { variableName } from './sourceFile' console.log(variableName) // 'variableValue' // Otherwise, you simply provide a local variable name // for what was exported as default. import sourceFile from './sourceFile' console.log(sourceFile.variableName) // 'variableValue'
// The third way of importing is for situations where there // isn't a default export but you want to warehouse everything // under a single variable. Say you have: export const a = 'A' export const b = 'B'
// Then you can import all exports under a single variable // with the usage of * as: import * as sourceFileWithoutDefault from './sourceFileWithoutDefault' console.log(sourceFileWithoutDefault.a) // 'A' console.log(sourceFileWithoutDefault.b) // 'B' // You can use this approach even if there is a default export: import * as sourceFile from './sourceFile' // Default exports are under the variable default: console.log(sourceFile.default) // { variableName: 'variableValue' } // As well as named exports: console.log(sourceFile.variableName) // 'variableValue
You can re-export anything from another file. This is useful when you have a single point of exit (index.{ts|js}
) but multiple files within the directory.
Say you have this folder structure:
./src ├── component │ ├── index.js │ ├── myComponent.js │ └── state.js └── index.js
You could have various exports from both store.js and my-component.js but only want to export some of them.
import createState from "./state"; export function example(){ };
export default function() {}
export { example as default } from "./myComponent"; export * from "./myComponent"
export * from "./component"
You need module.exports:
Exports
An object which is shared between all instances of the current module and made accessible through require(). exports is the same as the module.exports object. See src/node.js for more information. exports isn't actually a global but rather local to each module.
For example, if you would like to expose variableName
with value "variableValue"
on sourceFile.js
then you can either set the entire exports as such:
module.exports = { variableName: "variableValue" };
Or you can set the individual value with:
module.exports.variableName = "variableValue";
To consume that value in another file, you need to require(...)
it first (with relative pathing):
const sourceFile = require('./sourceFile'); console.log(sourceFile.variableName);
Alternatively, you can deconstruct it.
const { variableName } = require('./sourceFile'); // current directory --^ // ../ would be one directory down // ../../ is two directories down
If all you want out of the file is variableName
then
const variableName = 'variableValue' module.exports = variableName
const variableName = require('./sourceFile')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With