Я застрял с реализацией асинхронного ожидания на VueJS с использованием плагина babel и Transform-Runtime.Бабель, кажется, работает правильно.Чанк был создан и правильно загружен браузером.Он содержит правильный код JS, полученный из компонента Ticker.vue, но он не отображается на странице.нет 404 нет ошибок JS в консоли.Похоже, что "новый 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 task
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()
})
})
}