Angularjs 模块分析失败：意外的令牌webpack@3巴贝尔安格拉斯酒店 webpack/share.js package.json 巴别塔 控制台中的错误

获取所有*.directive.js文件的上述错误

这是filter.directive.js

import R from 'ramda'
import {
baseDirective
} from '../../utils'
import template from './filters.directive.html'
/**
 * Returns a function to filter an array of projects based on the id
 * and the compare function
 * @param id {Int}
 * @param projects {Array}
 * @param compareFn {Function}
 * @return Function
*/
const filterBy = function(id, projects, compareFn) {
if (!R.isNil(id) && !R.isEmpty(id)) {
    return projects.filter(compareFn)
}
return projects
}

/**
* Return a curried function to filter the projects list by customer
* @param id {Int}
* @param projects {Array}
*/
const filterByCustomer = R.curry((id, projects) =>
 filterBy(id, projects, item => item.customerName.Id === parseInt(id))
)

/**
* Return a curried function to filter the projects list by Region
* @param id {Int}
* @param projects {Array}
*/
const filterByRegion = R.curry((id, projects) =>
 filterBy(id, projects, item => item.region.Id === parseInt(id))
)

/**
 * Return a curried function to filter the projects list by Manager
 * @param id {Int}
 * @param projects {Array}
*/
const filterByManager = R.curry((id, projects) =>
 filterBy(id, projects, item => item.projectManager.Id === parseInt(id))
)

/**
 * Return a curried function to filter the projects list by Status
 * @param id {Int}
 * @param projects {Array}
*/
const filterByStatus = R.curry((name, projects) =>
filterBy(name, projects, item => {
    if (name === 'All Statuses') {
        return true
    }
    return item.projectStateValue === name
})
)

function FiltersCtrl(PubSub, CurrentList) {
'ngInject'
this.statuses.unshift({
    name: 'All Statuses',
    projectId: 0,
    id: 0,
})
this.status = this.statuses[0].name
const baseProjects = CurrentList.getOriginalList()

/**
 * Apply selected filters to a list of controllers
 * use the PubSub service to publish the event and the filtered projects 
list
 */
const applyFilters = function() {
    const filterProjects = R.compose(
        filterByManager(this.manager),
        filterByRegion(this.region),
        filterByCustomer(this.customer),
        filterByStatus(this.status)
    )
    CurrentList.setFilters({
        manager: this.manager,
        region: this.region,
        customer: this.customer,
        status: this.status,
    })
    PubSub.publish('projectsFiltered', filterProjects(baseProjects))
}

const clearFilters = function() {
    PubSub.publish('projectsCleared')
}

//Get the previously existent filters
const setFilters = function() {
    const filters = CurrentList.getFilters()
    if (!R.isEmpty(filters)) {
        this.manager = CurrentList.getFilters('manager')
        this.region = CurrentList.getFilters('region')
        this.customer = CurrentList.getFilters('customer')
        this.status = CurrentList.getFilters('status')
        applyFilters.call(this)
    }
}
setFilters.call(this)

angular.extend(this, {
    applyFilters,
    clearFilters,
})
}

function filtersDirective() {
  return {
    ...baseDirective(template, FiltersCtrl), // line where the error is thrown in console
    ...{
        bindToController: {
            customers: '=',
            regions: '=',
            managers: '=',
            projects: '=',
            statuses: '=',
        },
    },
  }
}

export default filtersDirective

下面是来自utils的baseDirective代码

import R from 'ramda'
import moment from 'moment'
import deepmerge from 'deepmerge'

// baseDirective params: template (comes from an import), controller is a 
function
// returns an object
export const baseDirective = (template, controller = function() {}) => ({
    restrict: 'EA',
    template,
    controller,
    controllerAs: 'vm',
    scope: {}
})

/**
 * Filter and array based on a string (color), returns the lengh of the new 
  array
 * @param color {String}
 * @param array {Array}
 * @return Int the lenght of the new filtered array
*/
export const filterByColor = (color, array) =>
    array.filter(item => item === color).length

export const groupByCount = (array, appendName) =>
    toLower(array).reduce((memory, item) => {
        if (item !== '') {
           if (memory.hasOwnProperty(`${item}${appendName}`)) {
                memory[`${item}${appendName}`] += 1
            } else {
                memory[`${item}${appendName}`] = 1
            }
        }
        return memory
    }, [])

/**
 * Creates a curried function that accepts an array
 * iterate over each item and convert string to lowercase
 * @param {Array}
 * @returns Function
 */
export const toLower = R.map(R.toLower)

/**
 * Return a parsed  date using moment
 */
export const getDate = date => {
    if (R.isEmpty(date) || R.isNil(date)) {
        return ''
    }
    return moment(date).utc().format('MM/DD/YYYY')
}

export const setClassName = value => {
    switch (value.toLowerCase()) {
        case 'green':
            return 'success'
        case 'red':
            return 'danger'
        case 'yellow':
            return 'warning'
    }
}

export const booleanToText = value => (value ? 'Yes' : 'No')

export const isObject = val =>
    (val !== null && val.constructor === Object) || val instanceof Object

所有指令都具有类似filtersDirective和指向baseDirective的结构 @./src/app/components/index.js 36:0-58是我导入filters.directive.js的行 从“./filters/filters.directive”导入filtersDirective 所有指令都抛出相同的错误，我得到 网页包：未能编译 控制台中

---

你知道模块解析错误吗？

你的问题是…baseDirective和…{前面的所有这些点。它们是用来干什么的？那不是有效的JavaScript

function filtersDirective() {
  return {
    ...baseDirective(template, FiltersCtrl), // line where the error is thrown in console
    ...{
        bindToController: {
            customers: '=',
            regions: '=',
            managers: '=',
            projects: '=',
            statuses: '=',
        },
    },
  }
}

---

这个错误说filters.directive.js第115行第4个字符处有一个意外的标记。这是什么？我们很难猜测在没有看到它的情况下在该文件中会找到什么。在控制台错误中，我发布了115行，其中“…baseDirectivetemplate，FilterCtrl，` line是您可以发布相关代码的吗r该文件不是全部，而只是我们在错误消息中看到的5行？@ChrisBarr添加了相应的文件以供参考，我的所有指令都抛出了类似的错误，webpack无法编译。请告诉我如何修复此错误。感谢是其他人创建的，我应该对其进行改进.我认为这些“…”与巴贝尔有关，我不知道它们是什么。这些点正好出现在第115行和第4字符上，错误消息说问题出在那里，所以我想你可以保证这就是问题所在。尝试移除它们，看看是否有效。我也不熟悉巴贝尔，所以我不确定。但是，如果是在巴贝尔产生的实际输出JS中，那么这就是问题所在。我刚刚在巴贝尔网站上找到了一个转换程序，将这些函数转换为javascript函数。如果成功，我会让你知道我让应用程序正常工作了，但我仍然希望这个问题被打开，因为即使不做这些更改，应用程序也必须正常工作，它以前也正常工作非常感谢您对现有代码的支持。非常感谢您为解决此问题提供的任何帮助

ERROR in ./src/app/components/filters/filters.directive.js
Module parse failed: Unexpected token (115:4)
You may need an appropriate loader to handle this file type.
| function filtersDirective() {
|   return {
|     ...baseDirective(template, FiltersCtrl),
|     ...{
|       bindToController: {
@ ./src/app/components/index.js 36:0-58
@ ./src/app/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/index.js

import R from 'ramda'
import {
baseDirective
} from '../../utils'
import template from './filters.directive.html'
/**
 * Returns a function to filter an array of projects based on the id
 * and the compare function
 * @param id {Int}
 * @param projects {Array}
 * @param compareFn {Function}
 * @return Function
*/
const filterBy = function(id, projects, compareFn) {
if (!R.isNil(id) && !R.isEmpty(id)) {
    return projects.filter(compareFn)
}
return projects
}

/**
* Return a curried function to filter the projects list by customer
* @param id {Int}
* @param projects {Array}
*/
const filterByCustomer = R.curry((id, projects) =>
 filterBy(id, projects, item => item.customerName.Id === parseInt(id))
)

/**
* Return a curried function to filter the projects list by Region
* @param id {Int}
* @param projects {Array}
*/
const filterByRegion = R.curry((id, projects) =>
 filterBy(id, projects, item => item.region.Id === parseInt(id))
)

/**
 * Return a curried function to filter the projects list by Manager
 * @param id {Int}
 * @param projects {Array}
*/
const filterByManager = R.curry((id, projects) =>
 filterBy(id, projects, item => item.projectManager.Id === parseInt(id))
)

/**
 * Return a curried function to filter the projects list by Status
 * @param id {Int}
 * @param projects {Array}
*/
const filterByStatus = R.curry((name, projects) =>
filterBy(name, projects, item => {
    if (name === 'All Statuses') {
        return true
    }
    return item.projectStateValue === name
})
)

function FiltersCtrl(PubSub, CurrentList) {
'ngInject'
this.statuses.unshift({
    name: 'All Statuses',
    projectId: 0,
    id: 0,
})
this.status = this.statuses[0].name
const baseProjects = CurrentList.getOriginalList()

/**
 * Apply selected filters to a list of controllers
 * use the PubSub service to publish the event and the filtered projects 
list
 */
const applyFilters = function() {
    const filterProjects = R.compose(
        filterByManager(this.manager),
        filterByRegion(this.region),
        filterByCustomer(this.customer),
        filterByStatus(this.status)
    )
    CurrentList.setFilters({
        manager: this.manager,
        region: this.region,
        customer: this.customer,
        status: this.status,
    })
    PubSub.publish('projectsFiltered', filterProjects(baseProjects))
}

const clearFilters = function() {
    PubSub.publish('projectsCleared')
}

//Get the previously existent filters
const setFilters = function() {
    const filters = CurrentList.getFilters()
    if (!R.isEmpty(filters)) {
        this.manager = CurrentList.getFilters('manager')
        this.region = CurrentList.getFilters('region')
        this.customer = CurrentList.getFilters('customer')
        this.status = CurrentList.getFilters('status')
        applyFilters.call(this)
    }
}
setFilters.call(this)

angular.extend(this, {
    applyFilters,
    clearFilters,
})
}

function filtersDirective() {
  return {
    ...baseDirective(template, FiltersCtrl), // line where the error is thrown in console
    ...{
        bindToController: {
            customers: '=',
            regions: '=',
            managers: '=',
            projects: '=',
            statuses: '=',
        },
    },
  }
}

export default filtersDirective

import R from 'ramda'
import moment from 'moment'
import deepmerge from 'deepmerge'

// baseDirective params: template (comes from an import), controller is a 
function
// returns an object
export const baseDirective = (template, controller = function() {}) => ({
    restrict: 'EA',
    template,
    controller,
    controllerAs: 'vm',
    scope: {}
})

/**
 * Filter and array based on a string (color), returns the lengh of the new 
  array
 * @param color {String}
 * @param array {Array}
 * @return Int the lenght of the new filtered array
*/
export const filterByColor = (color, array) =>
    array.filter(item => item === color).length

export const groupByCount = (array, appendName) =>
    toLower(array).reduce((memory, item) => {
        if (item !== '') {
           if (memory.hasOwnProperty(`${item}${appendName}`)) {
                memory[`${item}${appendName}`] += 1
            } else {
                memory[`${item}${appendName}`] = 1
            }
        }
        return memory
    }, [])

/**
 * Creates a curried function that accepts an array
 * iterate over each item and convert string to lowercase
 * @param {Array}
 * @returns Function
 */
export const toLower = R.map(R.toLower)

/**
 * Return a parsed  date using moment
 */
export const getDate = date => {
    if (R.isEmpty(date) || R.isNil(date)) {
        return ''
    }
    return moment(date).utc().format('MM/DD/YYYY')
}

export const setClassName = value => {
    switch (value.toLowerCase()) {
        case 'green':
            return 'success'
        case 'red':
            return 'danger'
        case 'yellow':
            return 'warning'
    }
}

export const booleanToText = value => (value ? 'Yes' : 'No')

export const isObject = val =>
    (val !== null && val.constructor === Object) || val instanceof Object

function filtersDirective() {
  return {
    ...baseDirective(template, FiltersCtrl), // line where the error is thrown in console
    ...{
        bindToController: {
            customers: '=',
            regions: '=',
            managers: '=',
            projects: '=',
            statuses: '=',
        },
    },
  }
}