Javascript 建立npm依赖关系'；我们一起吃早午餐

我一直在尝试用早午餐构建我的web应用程序。它取决于某个npm包（），该包只包含源代码，并且一直在使用ES2016进行编程

每次我尝试构建我的项目时，在将所述包作为依赖项添加后，我都会出现以下错误：

Processing of node_modules/animated-vue/src/index.js failed. SyntaxError: 'import' and 'export' may only appear at the top level (5:4)

这通常意味着模块没有被babel传输，这也是我的一个缺点

我想知道是否有人能帮我解决这个问题

这是我的早午餐配置.js文件：

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/, // Files that are not in `app` dir.
        'app.js': /^app/
      }
    },
    stylesheets: {
      joinTo: 'app.css'/*{
        'vendor.css': /^(?!app)/,
        'app.js': /^app/
      }*/
    },
    templates: {
      joinTo: 'app.js'
    }
  },
  plugins: {
    babel: {
      presets: ['latest', 'stage-3']
    },
    vue: {
      extractCSS: false
    },
    sass: {
      mode: "native",
      precision: 8,
      options: {
        includePaths: [
          'node_modules/bulma'
        ]
      }
    },
    copycat: {
      'fonts': ['node_modules/font-awesome/fonts']
    }
  },
  npm: {
    styles: {
      'izitoast': ['dist/css/iziToast.css'],
      'font-awesome': ['css/font-awesome.css'],
      'animate.css': ['animate.css']
    }
  }
}

{
  "name": "wannaworkthere",
  "version": "1.0.1",
  "description": "UI for the wannaworkthere package",
  "main": "public/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "brunch w --server",
    "build:local": "brunch b",
    "build:production": "PRODUCTION=true brunch b --production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://gitlab.com/srodriki/wannaworkthere.git"
  },
  "keywords": [
    "vue",
    "brunch",
    "vuex",
    "vue-router"
  ],
  "author": "Rodrigo Juliani <srodriki@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://gitlab.com/srodriki/wannaworkthere/issues"
  },
  "homepage": "https://gitlab.com/srodriki/wannaworkthere#README",
  "devDependencies": {
    "babel-brunch": "^6.0.6",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-stage-3": "^6.22.0",
    "brunch": "^2.10.6",
    "copycat-brunch": "^1.1.0",
    "process-env-brunch": "^1.4.5",
    "sass-brunch": "^2.10.4",
    "vue-brunch": "^2.0.0"
  },
  "dependencies": {
    "animate.css": "^3.5.2",
    "animated-vue": "^0.1.5",
    "axios": "^0.15.3",
    "bulma": "^0.3.2",
    "font-awesome": "^4.7.0",
    "izitoast": "^1.1.1",
    "moment": "^2.17.1",
    "store": "^1.3.20",
    "vee-validate": "^2.0.0-beta.25",
    "vue": "^2.1.10",
    "vue-router": "^2.2.0",
    "vuex": "^2.1.2"
  }
}

这里是我的package.json文件：

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/, // Files that are not in `app` dir.
        'app.js': /^app/
      }
    },
    stylesheets: {
      joinTo: 'app.css'/*{
        'vendor.css': /^(?!app)/,
        'app.js': /^app/
      }*/
    },
    templates: {
      joinTo: 'app.js'
    }
  },
  plugins: {
    babel: {
      presets: ['latest', 'stage-3']
    },
    vue: {
      extractCSS: false
    },
    sass: {
      mode: "native",
      precision: 8,
      options: {
        includePaths: [
          'node_modules/bulma'
        ]
      }
    },
    copycat: {
      'fonts': ['node_modules/font-awesome/fonts']
    }
  },
  npm: {
    styles: {
      'izitoast': ['dist/css/iziToast.css'],
      'font-awesome': ['css/font-awesome.css'],
      'animate.css': ['animate.css']
    }
  }
}

{
  "name": "wannaworkthere",
  "version": "1.0.1",
  "description": "UI for the wannaworkthere package",
  "main": "public/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "brunch w --server",
    "build:local": "brunch b",
    "build:production": "PRODUCTION=true brunch b --production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://gitlab.com/srodriki/wannaworkthere.git"
  },
  "keywords": [
    "vue",
    "brunch",
    "vuex",
    "vue-router"
  ],
  "author": "Rodrigo Juliani <srodriki@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://gitlab.com/srodriki/wannaworkthere/issues"
  },
  "homepage": "https://gitlab.com/srodriki/wannaworkthere#README",
  "devDependencies": {
    "babel-brunch": "^6.0.6",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-stage-3": "^6.22.0",
    "brunch": "^2.10.6",
    "copycat-brunch": "^1.1.0",
    "process-env-brunch": "^1.4.5",
    "sass-brunch": "^2.10.4",
    "vue-brunch": "^2.0.0"
  },
  "dependencies": {
    "animate.css": "^3.5.2",
    "animated-vue": "^0.1.5",
    "axios": "^0.15.3",
    "bulma": "^0.3.2",
    "font-awesome": "^4.7.0",
    "izitoast": "^1.1.1",
    "moment": "^2.17.1",
    "store": "^1.3.20",
    "vee-validate": "^2.0.0-beta.25",
    "vue": "^2.1.10",
    "vue-router": "^2.2.0",
    "vuex": "^2.1.2"
  }
}

{
“名称”：“wannaworkthere”，
“版本”：“1.0.1”，
“描述”：“wannaworkthere包的UI”，
“main”：“public/app.js”，
“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“开始”：“早午餐w——服务器”，
“本地建造”：“早午餐b”，
“构建：生产”：“生产=真正的早午餐b——生产”
},
“存储库”：{
“类型”：“git”，
“url”：“git”+https://gitlab.com/srodriki/wannaworkthere.git"
},
“关键词”：[
“vue”，
“早午餐”，
“vuex”，
“vue路由器”
],
“作者”：“罗德里戈·朱利安尼”，
“许可证”：“麻省理工学院”，
“臭虫”：{
“url”：”https://gitlab.com/srodriki/wannaworkthere/issues"
},
“主页”：https://gitlab.com/srodriki/wannaworkthere#README",
“依赖性”：{
“巴贝尔早午餐”：“^6.0.6”，
“巴别塔插件转换运行时”：“^6.22.0”，
“babel-preset-es2015”：“^6.22.0”，
“babel-preset-es2016”：“^6.22.0”，
“巴别塔预设最新版本”：“^6.22.0”，
“babel-preset-stage-3”：“^6.22.0”，
“早午餐”：“^2.10.6”，
“模仿早午餐”：“^1.1.0”，
“工艺环境早午餐”：“^1.4.5”，
“sass早午餐”：“^2.10.4”，
“vue早午餐”：“^2.0.0”
},
“依赖项”：{
“animate.css”：“^3.5.2”，
“动画vue”：“^0.1.5”，
“axios”：“^0.15.3”，
“bulma”：“^0.3.2”，
“字体真棒”：“^4.7.0”，
“izitoast”：“^1.1.1”，
“时刻”：“^2.17.1”，
“存储”：“^1.3.20”，
“vee验证”：“^2.0.0-beta.25”，
“vue”：“^2.1.10”，
“vue路由器”：“^2.2.0”，
“vuex”：“^2.1.2”
}
}

有人能帮我解决这个问题吗

---

谢谢

这似乎是早午餐套餐执行顺序的问题。即使这不是一个好的实践，你能试着把babel插件直接放在有问题的插件之前吗

值得注意的是，插件顺序很重要（如 它们列在package.json中）

---

正如上面写的那样。另外，请看。

看起来解决此问题的关键是将

npm.compilers

设置为

['babel-brunch']

，并注意文件不会被

babel_-brunch

忽略

---

有关详细的讨论和完整的工作示例，请参阅。

非常感谢您的回答。我相信你对插件顺序的看法是正确的。我将测试订购中的一些变化，看看会发生什么。非常感谢@Fox32提供的信息！babel brunch需要一个特殊的配置，这看起来确实很奇怪，因为brunch的前提是使用非传输npm依赖项，对我来说没有多大意义，但它确实按照您提到的方式工作。