---
title: Module Reference
---

# Module Reference

Logic programs of Smart MiniApp are written with JavaScript syntax. Certain common programs can be abstracted away into an independent .js file as a module, so this logic module can be shared and reused. Smart MiniApp supports two types of module syntax specifications: ESModule and CommonJS. We recommend that you use only one of these syntax specifications in the same project. Otherwise, an error might occur during an importing operation.

## ESModule syntax (recommended)

Modular features of ESModule include two commands: `export` and `import`. `export` is used to specify the external interfaces of the module. `import` is used to import the features provided by other modules.

### export command

Each module is an independent file. All variables in this file are inaccessible by external parties. To make a variable in a module public, you must use the `export` keyword to export this variable. In the following .js file, the `export` command is used to export a variable.

```js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
```

The preceding `profile.js` file stores user information. ECMAScript 6 (ES6) regards this file as a module, in which `export` is used to export three variables.

```js
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };
```

In this code block, `export` is followed by a group of variables that are specified by a pair of braces. This format is equivalent to the preceding `var` statements that declare the variables. However, the `export` syntax is recommended, because you can view all exported variables clearly at the end of the code block.

In addition to variables, `export` can be used to export functions or classes.

```js
export function multiply(x, y) {
  return x \* y;
};
```

In this example, the function `multiply` is exported.

For more information about `export`, visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export.

### import command

After `export` is used to specify the external interfaces of the module, other .js files can use the `import` command to import this module.

```js
// main.js
import { firstName, lastName, year } from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}
```

In the preceding code block, `import` is used to load the `profile.js` file and import accessible variables from this file. `import` receives a pair of braces that enclose the variables to be imported from another module. The names of the imported variables must be the same as the names of the external interfaces specified in `profile.js`.

For more information about `import`, visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.

## CommonJS syntax

The CommonJS module uses `module.exports` to export interfaces and uses `require` to import interfaces.

`exports` is a reference to `module.exports`. Therefore, if the content to which `exports` points is modified randomly in the module, unknown errors might occur. To avoid this problem, we recommend that you use `module.exports` to expose certain module interfaces, unless you know well about the logic relationship.

### module.exports command

The module can expose certain interfaces only by using `module.exports` or `exports`.

```js
module.exports = {
  firstName: 'Michael',
  lastName: 'Jackson',
  year: '1958',
};
```

In this example, `profile.js` is written in the CommonJS format and has three variables exported.

Also, functions or classes can be exported.

```js
module.exports = {
  multiply: function (x, y) {
    return x \* y;
  }
}
```

### require command

After `module.exports` is used to specify the external interfaces of the module, other .js files can use the `import` command to import this module.

```js
// main.js
const profile = require('./profile');

const { firstName, lastName, year } = profile;

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}
```

In the preceding code block, `require` is used to load the `profile.js` file and define the `profile` variable that is the object of `module.exports`.

**Note**: Do not use different types of module syntax in the same file. Instead, use the same module syntax in the same file. Otherwise, the program might not run as expected.

## Module action scope

The variables and functions declared in a JavaScript module file take effect only within this module. Other module files can have the same names of variables and functions declared and will not affect those in the former module file.

## Module reference

Absolution paths, relative paths, and npm third-party packages are supported to reference modules.

```js
import a from '/absolute';
import b from './relative';
import pkg from 'lodash';
```

In these references, file names and directory names cannot be repeated, unless you know well about the differences between repeated file names or directory names. Therefore, we recommend that you write full file names in absolute paths and relative paths.

```
├── foo
│   └──index.js
├── foo.js
```

```js
import foo from '/foo/'; // Introduces foo/index.js.
import foo from '/foo/index'; // Introduces foo/index.js.
import foo from '/foo'; // Introduces foo.js.
```

**Things to note**

1. Keep the names of the referenced modules in the case-sensitive format. Otherwise, an error might occur.
2. The following type of circular reference must be avoided: a.js -> b.js -> c.js -> a.js. Otherwise, an error might occur.

## npm support

Smart MiniApp supports the npm ecosystem. In the root directory, create `package.json` and use a package manager such as _npm_ _yarn_ to install a module. Then, the module can be referenced in the logic program of your project.

## Advanced syntax

### TypeScript syntax

JavaScript is a weakly typed programming language. To ensure your project quality, Smart MiniApp supports programming with [TypeScript](https://www.typescriptlang.org/).