Импорт файлов JavaScript и функций вызова с помощью webpack, ES6, ReactJS

Попытка сделать то, что я думаю, будет очень простой. Я хотел бы импортировать существующую библиотеку JavaScript, а затем вызвать ее функции. Так, например, я хотел бы импортировать blah.js, а затем вызвать blah().

import React from 'react';
import {blah} from 'blah/js/blah.js';

class MyClass extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }

    handleResize() {
        blah.blah();
    }

    render() {
          ....
    }
}

export default MyClass;

Просто интересно, какое волшебное сочетание вещей я должен сделать, чтобы сделать эту работу. Может быть, я просто не понимаю смысла. В примере приведена ошибка "TypeError: _blah.blah is undefined".

Ответы

Ответ 1

Именованный экспорт:

Скажем, вы создаете файл с именем utils.js, с функциями утилиты, которые вы хотите сделать доступными для других модулей (например, компонент React). Затем вы должны сделать каждую функцию именованным экспортом:

export function add(x, y) {
  return x + y
}

export function mutiply(x, y) {
  return x * y
}

Предполагая, что utils.js находится в том же каталоге, что и ваш компонент React, вы можете использовать его экспорт следующим образом:

import { add, multiply } from './utils.js';
...
add(2, 3) // Can be called wherever in your component, and would return 5.

Или, если хотите, разместите содержимое всего модуля в общем пространстве имен:

import * as utils from './utils.js'; 
...
utils.multiply(2,3)

Экспорт по умолчанию:

Если у вас, с другой стороны, есть модуль, который делает только одно (может быть класс React, нормальная функция, константа или что-то еще) и хотите сделать эту вещь доступной для других, вы можете использовать экспорт по умолчанию. Скажем, у нас есть файл log.js, только с одной функцией, которая выдает любой аргумент, с которым он звонил:

export default function log(message) {
  console.log(message);
}

Теперь это можно использовать следующим образом:

import log from './log.js';
...
log('test') // Would print 'test' in the console.

Вам не нужно называть его log при его импорте, вы можете называть его любым, что хотите:

import logToConsole from './log.js';
...
logToConsole('test') // Would also print 'test' in the console.

Комбинированный:

Модуль может иметь как экспорт по умолчанию (макс. 1), так и именованный экспорт (импортированный один за другим или используя * с псевдонимом). Реагирование действительно имеет это, считают:

import React, { Component, PropTypes } from 'react';

Ответ 2

import * as utils from './utils.js';

Если вы сделаете это, вы сможете использовать функции в utils.js как

utils.someFunction()