4

固定的。

解决方案是：

  1. .transform(babelify)也通过
  2. 确保您的所有.vue-file 脚本元素看起来像<script type="text/javascript">- type属性必须位于自定义属性之前，lang 属性.. 可能是第一个，甚至是标签上的唯一属性。

我认为我的问题是我的 vue 中有 es6。我正进入（状态：

[09:33:36] Starting 'public'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "s
tart"

该错误并没有真正告诉我它来自哪里（我的理解是它来自browserify），但如果我对公共脚本进行空操作，其余的构建工作。这是那个脚本：

gulp.task('public', ['public/styles'], () => {
    mkdirp.sync(dest+'/public/scripts')
    return browserify('public/scripts/demo.js')
        .transform(vueify)
    .bundle()
    .pipe(fs.createWriteStream(dest+'/public/scripts/index.js'))
})

这基本上是从 vueify 的 readme.MD 中复制的。它的依赖public/styles确实有效。

所以，我想，让我们尝试手动编译它们。我确保我有 babel-core 和 babel-preset-latest。然后：构建文件：

.babelrc

{ "presets": ["latest"]}

vue.config.js

var babel = require("babel-core");

module.exports = {
    customCompilers: {
    // for tags with lang="es6"
    es6: function (content, cb, compiler, filePath) {
      // content:  content extracted from lang="es6" blocks
      // cb:       the callback to call when you're done compiling
      // compiler: the vueify compiler instance
      // filePath: the path for the file being compiled
      //
      // compile some ES6... and when you're done:
      const babelified = babel.transform(content) // what to do with this funky babelified.map ?
      cb(null, babelified.code)
    }
}

这基本上直接来自 readme.MD，但对于 es6。

然后我将我的 vues 更改为具有该标签，例如：

<template>
    <div class="container">
        <app-header></app-header>
        <div class="row"><div class="col-xs-12">
            <transition name="slide" mode="out-in">
                <router-view></router-view>
            </transition>
        </div></div>
    </div>
</template>

<script lang="es6">
    import Header from './Header.vue'

    export default {
        components: {
            appHeader: Header
        },
        created() {
            this.$store.dispatch('initClasses')
        }
    }
</script>

<style>
    body {
        padding: 5vmin;
    }

    .slide-enter-active { animation: slide-in 200ms ease-out forwards }
    .slide-leave-active { animation: slide-out 200ms ease-out forwards }
    @keyframes slide-in {
        from { transform: translateY(-30vmin); opacity: 0 }
        to { transform: translateY(0px); opacity: 1}
    }
    @keyframes slide-out {
        from { transform: translateY(0px); opacity: 1 }
        to { transform: translateY(-30vmin); opacity: 0}
    }
</style>

问题是，我仍然遇到同样的错误。我究竟做错了什么？

回应附录

如果我按照下面的建议vue，在处理我的主 js 文件时，我的 import 语句会出错demo.js。

package.json 的开发部门

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.22.2",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^14.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "gulp-clean-dest": "^0.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-rimraf": "^0.2.1",
    "gulp-sass": "^3.1.0",
    "gulp-util": "^3.0.8",
    "gulp-vueify": "0.0.3",
    "mkdirp": "^0.5.1",
    "vueify": "^9.4.0"
  },

几乎固定。

在帮助下，我得到了 babelify 而不是在 vues 上窒息。这实际上非常晦涩但很简单，只需去掉lang属性并添加type="text/javascript"到每个脚本标签。（不能只添加该类型规范，它必须是脚本元素中的第一个标记）。

它几乎可以工作。现在我得到：

[14:04:32] Starting 'public'...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module './vues/Home.vue' from 'C:\Users\roberto\github\cmst385-accessibility\public\scripts'

那不是主要的js文件！在里面routes.js

我主要有：

import App from './vues/App.vue'
import {routes} from './routes'

这两项工作。

在我有的路线中：

import Home from './vues/Home.vue';

即使文件在那里，这也不起作用。

答对了

好的，所以我实际上将文件命名为“Home..vue”:)

4

2 回答 2

3

如果不看项目，这些东西总是很难调试，但我可以告诉你我是如何设置我的，你可以检查你是否有所有这些东西：

首先，确保你可以ES6在你的gulpfile. 最简单的方法是命名它 gulpfile.babel.js。我猜你已经有了这个设置，因为你正在设法编译你的styles.

现在，确保你已经安装了babel-latest，我再次确定你已经这样做了：

npm install --save-dev babel-preset-latest

我实际上使用的是babel-es2015-preset，所以如果你发现latest是你的问题，只需安装它并将以下内容添加到你的.babelrc：

{ 
"presets": ["es2015"]
}

现在，确保您已安装babelify：

npm install --save-dev babelify

然后将以下内容添加到package.json：

  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  }

这意味着您可以摆脱，vue.config.js因为browserify现在应该自动应用转换。

最后在您的 gulpfile 中，您可以执行以下操作：

gulp.task('public', ['public/styles'], () => {
   return browserify({
            entries: 'public/scripts/demo.js',
            debug: true
        })
        .bundle()
        .pipe(source('demo.js')))
        .pipe(gulp.dest('public/scripts'));
});

我从来不需要将lang属性添加到script标签来让它工作。

于 2017-02-02T16:00:30.700 回答
1

解决方案是：

  1. 也通过.transform(babelify)（或按照描述中列出的方式进行操作并将其设置为通过 package.json 中的 babelify）
  2. 确保您的所有.vue-file 脚本元素看起来像<script type="text/javascript">- type属性必须位于自定义属性之前，lang 属性.. 可能是第一个，甚至是标签上的唯一属性。
于 2017-02-03T16:01:55.820 回答