Імпортуйте файли 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;

Просто цікаво, яку чарівну комбінацію речей я повинен зробити, щоб ця робота вийшла. Можливо, я просто втрачаю суть. Приклад дає помилку "Помилка типу: _blah.blah не визначено".

Названий експорт:

Скажімо, ви створюєте файл із назвою 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), так і іменований експорт (імпортований по одному або *з використанням псевдоніма). React насправді має це, розглянемо:

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

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

Якщо ви зробите вищезазначене, ви зможете використовувати функції в utils.js як

utils.someFunction()