Question

我第一次尝试发布npm包。它应该与反应应用程序一起工作。我安装它并在我的应用程序中使用它后，它会崩溃。

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

我的包文件有点笨拙，因为我不完全确定要投入工作的内容。我google了一下，像lint之类的东西在那里，因为我已经看到了其他代码。我不确定我是否需要它。这是：

{
  "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"
}

我的主要包裹代码：

// 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

我可以导入包

import ResponsiveComponent from 'responsive-component'

但在任何地方使用它之前我都会遇到上述错误。任何帮助表示赞赏。感谢。

Answer 1

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

试图发布一个正常工作的npm包但在我尝试使用它时崩溃[模块解析失败：意外的令牌]

1 个答案: