异步等待VueJS gulp / babel的新实例

Question

我坚持使用babel和transform-runtime插件在VueJS上执行async await实现。 Babel似乎正常工作。该块已由浏览器创建并正确加载。它包含从Ticker.vue组件获得的正确JS代码，但未在页面上呈现。否404控制台中没有JS错误。 看来“ new Vue（）”根本没有运行，我在VueJS文档中找不到任何类似的问题或解决方案。

有什么想法可能有问题吗？

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 10"]
      }
    }]
  ],
  "plugins": ["syntax-dynamic-import", 
    ["transform-runtime", {
      "polyfill": false,
      "helper": false,
      "regenerator": true,
      "moduleName": "babel-runtime" 
    }]]
}

package.json

"babel-core": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1"

vue实例的当前有效实现

import Ticker from './components/ticker.vue';
const ticker = document.getElementById('ticker-vue-stackst');

if (ticker) {
    new Vue({
        el: ticker,
        render: h => h(Ticker)
    })
}

具有异步等待的新实现

async function renderTicker() {
    const ticker = document.getElementById('ticker-vue-container');
    console.log(ticker);

    if (ticker !== null) {
        const Ticker = await import('./components/ticker.vue');
        console.log(Ticker)
        new Vue({
            el: ticker,
            render: h => h(Ticker)
        })
    }
}

renderTicker();

gulp任务

const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path');
const PluginError = require('plugin-error');
const log = require('fancy-log');


module.exports = function (gulp, projectConfig, isProd) {
    const plugins = []
    let theSourcemap

    if (isProd) {
        plugins.push(new UglifyJsPlugin())
        plugins.push(
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            })
        )
        theSourcemap = false
    } else {
        theSourcemap = 'source-map'
        plugins.push(
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('development')
            })
        )
    }
    const webpackMode = isProd ? 'production' : 'development';
    gulp.task('webpack', function (callback) {
        webpack({
            resolve: {
                modules: [path.resolve(__dirname, '../node_modules')]
            },
            resolveLoader: {
                modules: [path.resolve(__dirname, '../node_modules')]
            },
            entry: {
                vue: `${projectConfig.src.vue}boot.js`
            },
            mode : webpackMode,
            devtool: theSourcemap,
            plugins: plugins,
            module: {
                rules: [
                    {
                        test: /\.vue$/,
                        loader: 'vue-loader',
                        exclude: /node_modules/,
                        options: {
                            loaders: {
                                js: {
                                    loader: 'babel-loader',
                                    options: {
                                        extends: path.join(process.cwd(), './.babelrc')
                                    }
                                }
                            }
                        }
                    },
                    {
                        test: /\.js$/,
                        loader: 'babel-loader',
                        exclude: /node_modules/,
                        options: {
                            extends: path.join(process.cwd(), './.babelrc')
                        }
                    },
                    {
                        test: /\.scss$/,
                        use: [
                          'vue-style-loader',
                          'css-loader',
                          'sass-loader'
                        ]
                      }
                ],
            },
            output: {
                path: path.resolve(`${projectConfig.dest.scripts}/`),
                publicPath: '/build/_client/scripts/',
                filename: '[name].js',
                chunkFilename: "[id].vue.js"
            }
        }, function(err, stats) {
            if (err) {
                throw new PluginError('webpack', err)
            }

            log('webpack', stats.toString({
                colors: true
            }))

            callback()
        })
    })

}