javascript - 使用 Brunch 构建 npm 依赖源

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一个完整的工作示例。