使用webpack,ES6,ReactJS导入JavaScript文件和调用函数

Question

试着做一些我认为会很简单的事情.我想导入一个现有的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未定义".

Answer 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)和命名导出(逐个导入或使用*别名).React实际上有这个,考虑:

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

Answer 2

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

如果您执行上述操作，您将能够使用 utils.js 中的函数作为

utils.someFunction()