预编译包含ES6 'import‘的riot标签

Question

有没有办法预编译包含如下ES6导入语法的riot.js标签？

<riot-tag>
  <script>
    import Foo from './foo'
    new Foo();
  </script>
</riot-tag>

我使用gulp和gulp riot来构建标签。

gulp.task('tags', () => {
  return gulp.src([`${srcDir}/*`])
    .pipe($.riot({
      type: 'es6'
    }))
    .pipe(gulp.dest(`${destDir}/`));
});

Answer 1

您需要使用gulp将ES2015代码转换为riot编译器可以理解的代码。

首先将ES2015编译器添加到您的应用程序中：

npm install babel-core babel-preset-es2015 --save-dev

然后添加你的.babelrc文件，告诉巴贝尔使用什么预设：

{
  "presets": ["es2015"]
}

然后吞咽应该能够处理它从那里：

import gulp from 'gulp';
import riot from 'gulp-riot';

gulp.task('tags', () => {
  return gulp.src([`${srcDir}/*`])
    .pipe(riot({
      type: 'es6'
    }))
    .pipe(gulp.dest(`${destDir}/`));
});

希望这能有所帮助！