vueify（在gulp任务中）与vue文件的babel转换

固定的

解决办法是：

通过

.transform（babelify）

确保所有

.vue

-文件脚本元素看起来像

——该类型属性必须位于自定义属性、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），但是如果我将公共脚本设为null，那么构建的其余部分就会工作。下面是脚本：

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/style

确实有效

所以，我想，让我们试着手动编译它们。我确保我有巴别塔核心和巴别塔预设最新。然后：生成文件：

B.法律改革委员会

{“预设”：[“最新”]}

vue.config.js 这基本上是直接从readme.MD中获得的，但是对于es6来说

然后我将VUE更改为具有该标记，如：

<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>

几乎修好了。 在帮助下，我的宝宝不会被vues噎住。这实际上相当模糊但很简单，只需去掉

lang

属性，并向每个脚本标记添加

type=“text/javascript”

。（不能只添加该类型规范，它必须是script元素中的第一个标记）

它几乎起作用了。现在我得到：

[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

我主要有： 这两种方法都有效

在路线上，我有： 即使文件在那里，这也不起作用

答对 了

---

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

这些东西在没有看到项目的情况下总是很难调试，但我可以向您展示我是如何设置的，您可以检查是否所有这些东西都准备好了：

首先，确保您可以在

gulpfile

中使用

ES6

。最简单的方法是将其命名为

gulpfile.babel.js

。我猜您在编译

样式时已经有了这个设置

现在，请确保您已经安装了最新版本的巴别塔，我再次确认您已经安装了：

npm install --save-dev babel-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
标记中，以使此功能正常工作。
解决方案是：

通过
.transform（babelify）
也可以（或者按照描述中列出的操作，并在package.json中将其设置为通过babelify）
确保所有
.vue
-文件脚本元素看起来像
——该类型属性必须位于自定义属性、lang属性之前。。可能是标记上的第一个，甚至是唯一的属性

我试着把
babel插件transform vue jsx
安装起来，但是由于import语句被嵌套（转换为jsx时它们不是顶级的），所以在细节上给您投票。非常感谢。那是哪种乙烯基原料，stream？我得到
错误：解析文件C:\Users\roberto\github\cmst385 accessibility\public\scripts\vues\App.vue:“导入”和“导出”可能只出现在顶层（5:0）
执行此操作。ps>添加了我的开发依赖项-您可以比较版本吗？这可能是browserify版本的问题。pps>你为什么认为要使用babelify？vueify文档非常清楚地表明，它不需要额外的配置，如果有babel core，它甚至会违背您的意愿使用它（不确定是否会发生这种情况，但…）。这是可能的，我使用的是
browserify 13.1.1
。看起来您的问题确实与transpiling
ES6
有关。我最近有一个关于GitHub的项目，所以你可以看看我的，你可能会觉得很有帮助。然后我把你的src/目录换成了我的，得到了同样的“App.vue”错误。然后我注意到你所有的vue
标记都有“type=”text/javascrirpt“`所以我添加了它们，但什么也没有发生。但是我也删除了我的语言标记，以便元素看起来完全相同（脚本和类型之间没有任何区别）瞧！另一个错误：
错误：找不到模块。/vues/Home.vue来自“C:\Users\roberto\github\cmst385 accessibility\public\scripts”
-这不是来自主文件，而是来自主文件中的
导入路径
。现在几乎可以工作了。明白了：）这是我以前所需要的，我只是在磁盘上的文件名有一个输入错误。
{ 
"presets": ["es2015"]
}

npm install --save-dev babelify

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

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