Импортируйте файл 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 не определено».

 loganfsmyth19 июл. 2016 г., 23:19
Без примера файла, который вы пытаетесь импортировать, это неопровержимо. В размещенном вами коде нет ничего плохого, но будет ли он работать, зависит от того, что экспортируетсяblah.js.
 Everettss19 июл. 2016 г., 23:31
Регистрироватьсяblah.js если вы назвали экспортblah объект.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

Ответы на вопрос(2)

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

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

utils.someFunction()
Решение Вопроса

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

Допустим, вы создаете файл с именем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';
 jiawen06 апр. 2017 г., 04:39
о, я пропустил это Спасибо!
 jiawen04 апр. 2017 г., 20:18
Как я могу импортировать только утилиты и вызывать такие функции, как util.add (), util.multiply ()?
 tobiasandersen20 июл. 2016 г., 10:40
Тогда вы, вероятно, экспортируете вещи в другие блоки. Когда ошибка читается, вам нужно сделать это на верхнем уровне (т.е. вне каких-либо блоков).
 user168662020 июл. 2016 г., 02:34
Имеет смысл, но теперь я получаю такие ошибки: SyntaxError: декларации экспорта могут появляться только на верхнем уровне модуля
 tobiasandersen04 апр. 2017 г., 23:04
@jiawen Вы можете сделать:import * as util from './utils.js';   (Я добавил это к ответу также).

Ваш ответ на вопрос