2
Je tente d'ajouter la Fondation pour les sites à mon premier projet Vue.js qui est configuré avec la Vue CLI.test unitaire Karma Vue.js + Fondation
Le site fonctionne cependant la suite de tests de l'unité Karma + PhantomJS émet cette erreur:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
SyntaxError: Invalid character: '`'
at webpack:///~/foundation-sites/js/foundation.util.core.js:24:0 <- index.js:10362
Je crois que cela est lié à webpack/babel et le chargement du module ES de la Fondation. Je ne sais pas trop comment diagnostiquer et résoudre le problème.
Voici un aperçu des changements de code que j'ai fait ...
main.js
import jQuery from 'jquery'
window.jQuery = jQuery
window.$ = jQuery
import Foundation from 'foundation-sites'
window.Foundation = Foundation
Hello.vue
<template> ... </template>
<script>
export default {
name: 'hello',
mounted() {
this.dropdownMenu = new Foundation.DropdownMenu($('#dropdown-menu'), {
// These options can be declarative using the data attributes
hoverDelay: 300
})
},
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
destroyed() {
this.dropdownMenu.destroy()
}
}
</script>
test/unit /index.js
import Vue from 'vue'
import Foundation from 'foundation-sites'
window.Foundation = Foundation
// ... auto-generated unit tests
test/unit/karma.conf.js
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['PhantomJS'],
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
reporters: ['spec', 'coverage'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
webpack.base.conf.js
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
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: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
Le Vue Cli met en place des configurations assez bien modularisées de karma et de webpack. Je viens d'ajouter la configuration de test de karma qui ressemble virtuellement à l'exemple que vous avez posté. Je remarque que la configuration webpack donne des alias pour une source Vue 'esm'. Je ne suis pas sûr si je devrais faire la même chose pour Foundation. Ajout de la configuration du test karma et de la configuration webpack-base à la question. –
Je viens d'ajouter une fondation à une application vue J'ai mis en place le karma et vous obtenez la même erreur que vous. Ce n'est donc pas quelque chose de spécifique à votre configuration. J'ai d'autres importations ES6 fonctionne bien –