Visual Studio Gulp Babel 解析导入

Question

如何让gulp-babel解析js文件的导入。因为现在运行在 visual studio 中没有错误，但是导入没有解决。是否需要指定要导入的模块的源目录 - 如何在 gulpfile.js?

中指定

gulpfile.js

"use strict";

 var gulp = require("gulp");
 var babel = require("gulp-babel");

 gulp.task("js", function () {
     return gulp.src('./wwwroot/js/app.js')
     .pipe(babel())
     . pipe(gulp.dest('./wwwroot/js/babel'));
 });

app.js:

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

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Answer 1

这解决了问题：

https://github.com/babel/babelify/issues/247

根据我目前的理解，问题是：依赖项没有被转译为 browserify 可以理解的 javascript 版本。

[有效方法]

gulpfile.js:

"use strict";

var gulp = require("gulp");
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

gulp.task("js", function () {
    browserify('./wwwroot/js/app.js')
        .transform("babelify", {
            global: true,
            presets: ["es2015", "es2016", "stage-0"],
            ignore: /\/node_modules\/underscore/
        })
        .bundle()
        .pipe(source('babel.js'))
        .pipe(gulp.dest('./wwwroot/js'));
});

package.json:

{
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "devDependencies": {
        "babel-core": "6.26.3",
        "gulp": "3.9.1",
        "browserify": "15.0.0",
        "babelify": "8.0.0",
        "babel-preset-es2015": "6.24.1",
        "babel-preset-es2016": "6.24.1",
        "babel-preset-stage-0": "6.24.1",
        "vinyl-source-stream": "2.0.0",
        "material-components-web": "0.28.0"
    }
}

Visual Studio Gulp Babel 解析导入

Visual Studio Gulp Babel Resolve Imports

javascript

visual-studio

gulp

material-design

gulp-babel