用Brunch构建npm依赖源

Question

我一直在尝试用Brunch构建我的web应用程序。它依赖于某个npm包(动画-vue)，它只包含源代码，并且一直在使用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转移，这也是我的devDependencies之一。

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

这是我的brunch-config.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']
    }
  }
}

下面是我的package.json文件：

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

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

谢谢!

Answer 1

看起来，解决此问题的关键是将npm.compilers设置为['babel-brunch']，并注意babel_brunch不会忽略这些文件。

详细讨论请参见本期，完整的工作示例请参见这个储存库。

Answer 2

这似乎是执行Brunch包的顺序的一个问题。即使这不是很好的实践，你能尝试把babel插件直接放在你的麻烦插件之前吗？

值得注意的是，插件的顺序很重要(如在package.json中列出的顺序)。

因为它是用布鲁奇指南编写的。另外，看看本期。