Visual Studio Gulp Babel Resolve Imports

Как заставить 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'));

javascript visual-studio gulp material-design gulp-babel

23.06.2018 09:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

321

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это решило проблему:

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

В моем текущем понимании проблема заключалась в том, что зависимости не переносятся в версию 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"
    }
}

Браузеры не могут обрабатывать операторы импорта, это исправляет объединение браузеров. Однако browserify не может читать es6, так что вы правы. Сначала транспилируйте с помощью babelify, затем свяжите с помощью browserify, и вы получите очень красивый импорт!

— 25.06.2018 21:30

24.06.2018 11:12