のWebPACK + Vuejs + GSAP問題

Question

私はこの問題を持っている：

__WEBPACK_IMPORTED_MODULE_0_gsap___default.a.to is not a function

私のコンポーネントで、私はそれ

をインポート

import TweenMax from 'gsap'; 

このような方法でこれを使用します。ここ

typeText() { 
    TweenMax.to('#header-line-1', 1, { x: 500 }); 
    } 

は

'use strict' 
const path = require('path') 
const utils = require('./utils') 
const config = require('../config') 
    const vueLoaderConfig = require('./vue-loader.conf') 

function resolve (dir) { 
    return path.join(__dirname, '..', dir) 
} 

const createLintingRule =() => ({ 
    test: /\.(js|vue)$/, 
    loader: 'eslint-loader', 
    enforce: 'pre', 
    include: [resolve('src'), resolve('test')], 
    options: { 
    formatter: require('eslint-friendly-formatter'), 
    emitWarning: !config.dev.showEslintErrorsInOverlay 
    } 
}) 

module.exports = { 
    context: path.resolve(__dirname, '../'), 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: config.build.assetsRoot, 
    filename: '[name].js', 
    publicPath: process.env.NODE_ENV === 'production' 
     ? config.build.assetsPublicPath 
     : config.dev.assetsPublicPath 
    }, 
    resolve: { 
    extensions: ['.js', '.vue', '.json'], 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
     '@': resolve('src') 
    } 
    }, 
    module: { 
rules: [ 
    ...(config.dev.useEslint ? [createLintingRule()] : []), 
    { 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: vueLoaderConfig 
    }, 
    { 
    test: /\.js$/, 
    loader: 'babel-loader', 
    include: [resolve('src'), resolve('test')] 
    }, 
    { 
    test: /\.(png|jpe?g|gif)(\?.*)?$/, 
    loader: 'url-loader', 
    options: { 
     limit: 10000, 
     name: utils.assetsPath('img/[name].[hash:7].[ext]') 
    } 
    }, 

は、以下の私は、彼らが私の質問にneccesaryじゃないと思う他のルールがある

Answer 1

gsapパッケージのデフォルトのエクスポートではない私のWebPACKの設定ファイルでありますTweenMaxをインポートしようとしています。あなたが使用したいどのモジュール示さへcurcly括弧を使用して、パッケージのモジュールをインポートする代わりに試してみてください。

import { TweenMax } from 'gsap';