parse-es-import

Inspired by parse-static-imports, and have the same return result as it, and can run both on browser/node sides because it is based on acron.

Will properly parse:

• Default import. e.g. import utils from 'utils';

• Star imports. e.g. import * as utils from 'utils';

• Named imports. e.g. import { Foo as MyFoo } from 'utils';

• Side effect only imports, e.g. import './App.css';

• Multi-line imports, like

  import React, { useState, useCallback, useEffect } from 'react';

Installation

npm install --save parse-es-import

Usage

import fs from 'fs';
import parse from 'parse-es-import';

const file = fs.readFileSync('./path/to/file.js', 'utf8');
const results = parse(file);

console.log(JSON.stringify(results, null, 2));

API

• content: String - Contents of code to parse.
• options: Object - Receive all parameters of acorn.parse. Its default value is { ecmaVersion: 2021, sourceType: 'module' }.

Returns

{
  "imports": {},
  "exports": {}
}

imports

| Attribute | Type | Default Value | Description | | -------------- | ---------- | ------------- | ----------------------------------------------------------------------- | | moduleName | String | '' | The name of the module imported or a relative path (e.g. 'react-dom') | | starImport | String | '' | The name of the star imported module object, if present | | namedImports | Object[] | [] | List of named imports as a list of objects | | defaultImport | String | '' | The name of the default import, if present | | sideEffectOnly | Boolean | false | If the import was side-effect only (e.g. import './App.css';) | | startIndex | Number | 0 | Index of the starting character of the import statement | | endIndex | Number | 0 | Index of the ending character + 1 of the import statement |

Named import objects have the form:

| Attribute | Type | Default Value | Description | | --------- | -------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | String | '' | The name of the named import (e.g. { useState }) | | alias | String | name | Will be the alias of a named import if aliased, otherwise defaults to the named import (e.g. import { foo /* the named import */ as bar /* the alias */ } from 'module-name';) |

exports

| Attribute | Type | Default Value | Description | | ---------- |-----------------------|---------------|----------------------------------------------------------------------| | moduleName | String | '' | The name of the module exported | | type | String | '' | The type of module exported | | value | String | '' | The value of module exported or a relative path (e.g. '../add.js') | | startIndex | Number | 0 | Index of the starting character of the export statement | | endIndex | Number | 0 | Index of the ending character + 1 of the export statement | | identifierList | String | null | The identifiers exported by this file | | identifierTree | Record<string, any> | null | The identifier tree exported by this file |

Example

Content to parse:

import React from 'react';
import antd, { Button as AntButton, Alert } from 'antd';
import * as Hello from 'hello';

import 'xx.less';

export function Demo () {
  return <div>Hello World...</div>;
};

// this identifier is exported by obj
const A = 'A';
export const obj = { A: A };

The parse result will be:

{
  "imports": [
    {
      "moduleName": "react",
      "starImport": "",
      "defaultImport": "React",
      "namedImports": [],
      "sideEffectOnly": false,
      "startIndex": 1,
      "endIndex": 27
    },
    {
      "moduleName": "antd",
      "starImport": "",
      "defaultImport": "antd",
      "namedImports": [
        {
          "name": "Button",
          "alias": "AntButton"
        },
        {
          "name": "Alert",
          "alias": "Alert"
        }
      ],
      "sideEffectOnly": false,
      "startIndex": 28,
      "endIndex": 84
    },
    {
      "moduleName": "hello",
      "starImport": "Hello",
      "defaultImport": "",
      "namedImports": [],
      "sideEffectOnly": false,
      "startIndex": 85,
      "endIndex": 116
    },
    {
      "moduleName": "xx.less",
      "starImport": "",
      "defaultImport": "",
      "namedImports": [],
      "sideEffectOnly": true,
      "startIndex": 118,
      "endIndex": 135
    }
  ],
  "exports": [
    {
      "type": "FunctionDeclaration",
      "moduleName": "Demo",
      "value": "function Demo () {\n  return <div>Hello World...</div>;\n}",
      "startIndex": 137,
      "endIndex": 200
    },
    {
      "type": "VariableDeclaration",
      "moduleName": "obj",
      "value": "{ A: A }",
      "identifierList": [
        "A"
      ],
      "identifierTree": {
        "A": "A"
      },
      "startIndex": 256,
      "endIndex": 284
    }
  ]
}