0

我正在尝试使用 gulp 将我的 es6 代码转换为 es5。我的 gulpfile.babel.js 文件是 -

var gulp = require('gulp')
var connect = require('gulp-connect')
var open = require('gulp-open')
var babelify = require('babelify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var browserify = require('browserify')

gulp.task('jsTranspile', () => {
  return browserify(['src/js/main.js'])
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('dev/'))
})

gulp.task('css', () => {
  return gulp.src('src/css/*.css')
             .pipe(gulp.dest('./dev'))

})

gulp.task('watch', () => {
  return gulp.watch('./js/*.js', gulp.series('jsTranspile'));
});
 
gulp.task('open', () => {
  gulp.src('./snake.html')
      .pipe(open({uri: "https://localhost:7000"}));
});

gulp.task('connect', () => {
  return connect.server({
    root: ".",
    port: 7000,
    livereload: true      
  });
});

gulp.task('start', gulp.series('css', 'jsTranspile', 'connect', 'watch'));

我的目录结构 -

❯ tree  -I 'node_modules'                                                                                                                                                                                                      13:08:36
.
├── dev
│   └── main.css
├── gulpfile.babel.js
├── package.json
├── package-lock.json
├── snake.html
├── src
│   ├── css
│   │   └── main.css
│   └── js
│       ├── main.js
│       └── snake.js
└── yarn.lock

主.js

import {Snake} from 'snake'

const renderGrid = () => {
    $("#grid").empty();
    for(let y = 0; y < 16; y++) {
      $("#grid").append(`<div class='row' id='row-${y}'/>`)
      for(let x = 0; x < 16; x++){
        $(`#row-${y}`).append(`<div />`);
      }
    }
    $(document).focus();
  }
  
  $(document).ready(() => {
    renderGrid();
  })

Snake.js

class Snake {
    constructor(initialSize, initialHeading, head, body) {
       this.initialSize = initialSize;
       this.initialHeading = initialHeading;
       this.head = head;
       this.body = body;
    }
 }
 

 export {Snake}

当我这样做时gulp start，它会在尝试转换时出错 -

❯ gulp start                                                                                                                                                                                                                   13:10:01
[13:10:04] Requiring external module @babel/register
[13:10:04] Using gulpfile ~/trials/gulp/gulpfile.babel.js
[13:10:04] Starting 'start'...
[13:10:04] Starting 'css'...
[13:10:04] Finished 'css' after 15 ms
[13:10:04] Starting 'jsTranspile'...
[13:10:04] 'jsTranspile' errored after 245 ms
[13:10:04] Error: Can't walk dependency graph: Cannot find module 'snake' from '/home/ninan/trials/gulp/src/js/main.js'
    required by /home/ninan/trials/gulp/src/js/main.js
    at /home/ninan/trials/gulp/node_modules/resolve/lib/async.js:146:35
    at processDirs (/home/ninan/trials/gulp/node_modules/resolve/lib/async.js:299:39)
    at isdir (/home/ninan/trials/gulp/node_modules/resolve/lib/async.js:306:32)
    at /home/ninan/trials/gulp/node_modules/resolve/lib/async.js:34:69
    at FSReqWrap.oncomplete (fs.js:153:21)
[13:10:04] 'start' errored after 262 ms

这里有什么问题？我在蛇模块的导入上尝试了很多变体。似乎没有一个工作。我应该将它传递给 browserify 吗？现在我的假设是只需要为 browserify 提供入口点 js 文件。这个假设是错误的吗？

4

0 回答 0