trying to publish a working npm package but crashes when i try to use it[Module parse failed: Unexpected token]

Question

I am trying for the first time to publish a npm package. It's supposed to work with a react app. After i install it and use it in my app it crashes on this error.

Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type.
|     }
|
|     handleBreakpoints = () => {
|         const width = window.innerWidth
|         const height = window.innerHeight

My package file is a bit wanky because I am not entirely sure what to put into to work. I googled around and something like lint are in there because I have seen it other code. I am not sure if I need it or not. Here it is:

{
  "name": "responsive-component",
  "author": "Yevgeniy Skroznikov",
  "version": "0.1.3",
  "description": "A responsive component that will let you set responsive breakpoints on max-width and max-height to render appropriately.",
  "license": "MIT",
  "main": "responsive-component.js",
  "keywords": [
      "responsive",
      "component",
      "react"
  ],
  "peerDependencies": {
    "react": "*"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel": "^5.6.14",
    "babel-eslint": "^4.1.8",
    "eslint": "^1.3.1",
    "eslint-plugin-react": "^3.3.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/tehcoyote/responsive-component.js.git"
  },
  "homepage": "https://github.com/tehcoyote/responsive-component.js"
}

And my main package code:

// ResponsiveComponent coded by Yevgeniy Skroznikov
// MIT License
import React, { Component } from 'react'

class ResponsiveComponent extends Component {
    constructor(props){
        super(props)
    }

    handleBreakpoints = () => {
        const width = window.innerWidth
        const height = window.innerHeight
        let breakpoint, lowestwbp, lowesthbp

        if(this.breakpoints === undefined)
            return

        let newStyle = this.insertStyle({}, this.breakpoints.default())

        if(this.breakpoints.test)
            console.log(`responsive width(px): ${width} height(px): ${height}`)


        const handleMax = (selection) => {
            let lowestbp
            if(this.breakpoints[`max${selection}`] !== undefined){
                let breaks = Object.keys(this.breakpoints[`max${selection}`])
                for(let i = breaks.length - 1; i >= 0; i--){
                    breakpoint = parseInt(breaks[i])
                    if(selection === "Width"){
                        if(breakpoint <= width)
                            break
                    }
                    else if(breakpoint <= height)
                            break
                    lowestbp = breakpoint
                    let styleChange = this.breakpoints[`max${selection}`][breaks[i]]()
                    if(styleChange !== undefined)
                        newStyle = this.insertStyle(newStyle, styleChange)
                }
            }
            return lowestbp
        }    

        lowestwbp = handleMax("Width")
        lowesthbp = handleMax("Height")

        if(Object.keys(newStyle).length !== undefined){
            if(this.breakpoints.test){
                console.log(`changing a style: `)
                console.log(newStyle)
            }    
            this.breakpoints.newState(newStyle, lowestwbp, lowesthbp)
        }
    }

    insertStyle(currentStyle, change){
        let newStyle = {...currentStyle}
        Object.keys(change).forEach(obj => {
            if(newStyle[obj] === undefined){
                newStyle = {...newStyle, [obj]: {...this.state[obj]}}
            }
            Object.keys(change[obj]).forEach(style => {
                newStyle[obj][style] = change[obj][style]
            })
        })
        return newStyle
    }

    componentWillMount(){
        this.breakpoints = this.response()
        this.handleBreakpoints()
        window.addEventListener("resize", this.handleBreakpoints);
    }
}

export default ResponsiveComponent

I can import the package

import ResponsiveComponent from 'responsive-component'

But before even using it anywhere I get the above error. Any help is appreciated. Thanks.

Answer 1

这帮助我解决了我的问题： http : //jamesknelson.com/writing-npm-packages-with-es6-using-the-babel-6-cli/有点过时了，但仍然有效，并且让我走上了正确的轨道。