Question

我正在通过@Material教程here进行工作，并且遇到了编译ES6代码的问题。我以前使用Gulp作为任务运行器来构建项目，并且想知道是否应该仅使用webpack来实现捆绑功能。

我的gulpfile.js代码设置如下：

const babel = require('gulp-babel');

gulp.task('scripts', function(done) {
    return gulp.src(
      [
      'node_modules/@material/'
      ])
      .pipe(babel({
        presets: ['env']
      }).on('error', babel.logError))
      .pipe(gulp.dest('compiled'))
});

具有@Material组件的JS文件的加载方式如下：

<script type="module" src="js/loggedin.js"></script>

该JS文件如下所示：

import {MDCRipple} from '@material/button';
import {MDCTextField} from '@material/textfield';

但是，在控制台中，出现以下错误：Uncaught TypeError: Failed to resolve module specifier "@material/button". Relative references must start with either "/", "./", or "../".

当我尝试通过添加相对路径来解决问题时，控制台会抱怨：

GET http://localhost:8081/node_modules/@material/button net::ERR_ABORTED 404 (Not Found)

我已经仔细检查了路径，它应该是正确的。我可能做错了什么？

使用gulp-babel从@Material组件中转译ES6

0 个答案: