質問編集履歴

1 webpack.dev.config.jsの追記

syoyu

syoyu score 13

2018/03/14 01:11  投稿

vue-fullcalendar
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>
```
calendar.vue(自作)
```
<template>
 <full-calendar :events="events"></full-calendar>
</template>
<style>
   @import '~fullcalendar/dist/fullcalendar.css';
</style>
<script>
 import Vue from 'vue'
 import { FullCalendar } from 'vue-full-calendar'
 export default {
   data() {
   return {
     events: [
       {
           title : 'event1',
           start : '2010-01-01',
       },
       {
           title : 'event2',
           start : '2010-01-05',
           end   : '2010-01-07',
       },
       {
           title : 'event3',
           start : '2010-01-09T12:30:00',
           allDay : false,
       },
     ]
webpack.dev.config.js
```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'
   }
 },
   components: {
     FullCalendar,
   },
 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
 }
</script>
};
```
  • Vue.js

    2636 questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る