https://github.com/CroudSupport/vue-fullcalendarを実装しようとしています。
ビルドしてみたところ、Uncaught SyntaxError: Unexpected identifierというエラーが出ました。調べてみたのですが理由不明です。エラー箇所はnode_modules/vue-full-calendar/components/FullCalendar.vueというファイルのimport FullCalendar from './components/FullCalendar.vue'という箇所で起きているみたいです。
node_modules/~/FullCalendar.vue
<template>
<div ref="calendar" id="calendar"></div>
</template>
<script>
import defaultsDeep from 'lodash.defaultsdeep'
import 'fullcalendar'
import $ from 'jquery'
export default {
props: {
events: {
default() {
return []
},
},
eventSources: {
default() {
return []
},
},
editable: {
default() {
return true
},
},
selectable: {
default() {
return true
},
},
selectHelper: {
default() {
return true
},
},
header: {
default() {
return {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
},
},
defaultView: {
default() {
return 'agendaWeek'
},
},
sync: {
default() {
return false
}
},
config: {
type: Object,
default() {
return {}
},
},
},
computed: {
defaultConfig() {
const self = this
return {
header: this.header,
defaultView: this.defaultView,
editable: this.editable,
selectable: this.selectable,
selectHelper: this.selectHelper,
aspectRatio: 2,
timeFormat: 'HH:mm',
events: this.events,
eventSources: this.eventSources,
eventRender(...args) {
if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
}
self.$emit('event-render', ...args)
},
eventDestroy(event) {
if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
}
},
eventClick(...args) {
self.$emit('event-selected', ...args)
},
eventDrop(...args) {
self.$emit('event-drop', ...args)
},
eventResize(...args) {
self.$emit('event-resize', ...args)
},
dayClick(...args){
self.$emit('day-click', ...args)
},
select(start, end, jsEvent, view, resource) {
self.$emit('event-created', {
start,
end,
allDay: !start.hasTime() && !end.hasTime(),
view,
resource
})
}
}
},
},
mounted() {
const cal = $(this.$el),
self = this
this.$on('remove-event', (event) => {
if(event && event.hasOwnProperty('id')){
$(this.$el).fullCalendar('removeEvents', event.id);
}else{
$(this.$el).fullCalendar('removeEvents', event);
}
})
this.$on('rerender-events', () => {
$(this.$el).fullCalendar('rerenderEvents')
})
this.$on('refetch-events', () => {
$(this.$el).fullCalendar('refetchEvents')
})
this.$on('render-event', (event) => {
$(this.$el).fullCalendar('renderEvent', event)
})
this.$on('reload-events', () => {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', this.events)
})
this.$on('rebuild-sources', () => {
$(this.$el).fullCalendar('removeEventSources')
this.eventSources.map(event => {
$(this.$el).fullCalendar('addEventSource', event)
})
})
cal.fullCalendar(defaultsDeep(this.config, this.defaultConfig))
},
methods: {
fireMethod(...options) {
return $(this.$el).fullCalendar(...options)
},
},
watch: {
events: {
deep: true,
handler(val) {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', this.events)
},
},
eventSources: {
deep: true,
handler(val) {
this.$emit('rebuild-sources')
},
},
},
beforeDestroy() {
this.$off('remove-event')
this.$off('rerender-events')
this.$off('refetch-events')
this.$off('render-event')
this.$off('reload-events')
this.$off('rebuild-sources')
},
}
</script>
webpack.dev.config.js
try {
var path = require('path');
var os = require('os');
var cordovaNodeModules = path.join(os.homedir(), '.cordova', 'node_modules');
var webpack = require(path.join(cordovaNodeModules, 'webpack'));
var HtmlWebpackPlugin = require(path.join(cordovaNodeModules, 'html-webpack-plugin'));
var ExtractTextPlugin = require(path.join(cordovaNodeModules, 'extract-text-webpack-plugin'));
var ProgressBarPlugin = require(path.join(cordovaNodeModules, 'progress-bar-webpack-plugin'));
var cssnext = require(path.join(cordovaNodeModules, 'postcss-cssnext'));
var postcssImport = require(path.join(cordovaNodeModules, 'postcss-import'));
var postcssUrl = require(path.join(cordovaNodeModules, 'postcss-url'));
} catch (e) {
throw new Error('Missing Webpack Build Dependencies.');
}
module.exports = {
devtool: 'inline-source-map',
context: __dirname,
debug: true,
cache: true,
entry: [
'webpack/hot/only-dev-server',
'./src/main'
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
publicPath:'/'
},
resolve: {
root: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.resolve(cordovaNodeModules)
],
extensions: ['', '.js', '.vue', '.json', '.css', '.html', '.styl'],
unsafeCache: true,
alias: {
vue:'vue/dist/vue.common.js'
},
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.html$/,
loader: 'html'
}, {
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?\S*)?$/,
loader: 'file?name=assets/[name].[hash].[ext]'
}, {
test: /\.css$/,
include: [
path.join(__dirname, 'node_modules', 'onsenui', 'css-components-src', 'src'),
path.join(__dirname, 'src')
],
loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&-raw!postcss-loader')
}, {
test: /\.css$/,
exclude: [
path.join(__dirname, 'node_modules', 'onsenui', 'css-components-src', 'src'),
path.join(__dirname, 'src')
],
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
}, {
test: /\.json$/,
loader: 'json'
}]
},
vue: {
loaders: {
js: 'babel'
}
},
babel: {
presets: [
path.join(cordovaNodeModules, 'babel-preset-es2015')
],
},
postcss: function() {
return [
postcssImport,
postcssUrl,
cssnext({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
})
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
template: 'src/public/index.html.ejs',
chunksSortMode: 'dependency'
}),
new ProgressBarPlugin()
],
resolveLoader: {
root: [
path.join(__dirname, 'node_modules'),
cordovaNodeModules
]
},
devServer: {
contentBase: './src/public',
colors: true,
inline: true,
historyApiFallback: true,
host: '0.0.0.0',
stats: 'minimal',
hot: true
}
};
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正の依頼
karamarimo
2018/03/13 11:51
ビルドのコンフィグファイルを載せたほうがいいと思います(webpack なら webapck.config.js みたいな名前のファイル)。
syoyu
2018/03/14 00:57
追記します。ご指摘ありがとうございます。