Question

我一直在尝试用Brunch构建我的Web应用程序。它取决于某个npm包（animated-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不会忽略这些文件。

有关详细讨论，请参阅this issue;有关完整的工作示例，请参阅this repository。

Answer 2

这似乎与Brunch软件包的执行顺序有关。即使这不是一个好习惯，你可以尝试直接在你的麻烦插件之前插入babel插件吗？

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

正如the Brunch guide所写。另外，请查看this issue。

使用Brunch构建npm依赖项的源代码

2 个答案: