vueify（在 gulp 任务中）对 vue 文件进行 babel 转换
vueify (in gulp task) with babel transform of vue files
已修复。
解决方法是：
- 也通过
.transform(babelify)
- 确保所有
.vue-file 脚本元素看起来像 <script type="text/javascript"> -- type 属性必须在 before[=89] =] 自定义属性、lang 属性.. 可能是第一个，甚至是标签上的唯一属性。
我认为我的问题是我的 vues 中有 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），但是如果我对 public 脚本进行空操作，其余的构建工作。这是该脚本：
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>
问题是，我仍然遇到同样的错误。我做错了什么？
回复附录
如果我遵循以下建议，在处理我的主 js 文件 demo.js.
时，我的 vue 中的导入语句会出错
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" 即可。 （不能只添加该类型规范，它必须是脚本元素中的 first 标记）。
差不多可以了。现在我得到：
[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" :)
如果没有看到项目，这些东西总是很难调试，但我可以告诉你我是如何设置我的，你可以检查你是否有所有这些东西：
首先，确保您可以在 gulpfile 中使用 ES6。最简单的方法是将其命名为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 标签来使它正常工作。
解决方法是：
- 也通过
.transform(babelify)（或者按照说明中列出的操作并将其设置为在 package.json 中通过 babelify）
- 确保所有
.vue-file 脚本元素看起来像 <script type="text/javascript">——type 属性必须在 before[=22] =] 自定义属性、lang 属性.. 可能是第一个，甚至是标签上的唯一属性。
已修复。
解决方法是：
- 也通过
.transform(babelify) - 确保所有
.vue-file 脚本元素看起来像<script type="text/javascript">-- type 属性必须在 before[=89] =] 自定义属性、lang 属性.. 可能是第一个，甚至是标签上的唯一属性。
我认为我的问题是我的 vues 中有 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），但是如果我对 public 脚本进行空操作，其余的构建工作。这是该脚本：
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>
问题是，我仍然遇到同样的错误。我做错了什么？
回复附录
如果我遵循以下建议，在处理我的主 js 文件 demo.js.
vue 中的导入语句会出错
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" 即可。 （不能只添加该类型规范，它必须是脚本元素中的 first 标记）。
差不多可以了。现在我得到：
[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" :)
如果没有看到项目，这些东西总是很难调试，但我可以告诉你我是如何设置我的，你可以检查你是否有所有这些东西：
首先，确保您可以在 gulpfile 中使用 ES6。最简单的方法是将其命名为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 标签来使它正常工作。
解决方法是：
- 也通过
.transform(babelify)（或者按照说明中列出的操作并将其设置为在 package.json 中通过 babelify） - 确保所有
.vue-file 脚本元素看起来像<script type="text/javascript">——type 属性必须在 before[=22] =] 自定义属性、lang 属性.. 可能是第一个，甚至是标签上的唯一属性。