Question

我用gulp打包js。我也想使用其他库，如materializecss。所以我只是在main.js中导入它。但在建立吞咽之后我遇到了一个错误：

events.js：165 扔掉//未处理的错误＆＃39;事件 ^ SyntaxError：＆＃39; import＆＃39;和＆＃39;出口＆＃39;可能仅与＆＃39; sourceType：module＆＃39;
一起出现

main.js

import "materialize-css";
const Vue = require("vue");
const $ = require("jquery");

const v = new Vue({
    el: '#app',
    ready: function () {
        this.loadData();
    },
    data: {
        message: 'Hfssfsfello Vue.13js!',
        serverData: null
    },
    methods: {
        loadData: function (viewerUserId, posterUserId) {
            const that = this;

            $.ajax({
                contentType: "application/json",
                dataType: "json",
                url: window.ServerUrl + "/Home/GetData",
                method: "GET",
                success: function (response) {
                    console.log(response);
                    that.$data.serverData = response;
                },
                error: function () {
                    console.log("Oops");
                }
            });
        }
    }
})

gulpfile

const gulp = require('gulp');
const gutil = require('gulp-util');
var babel = require('gulp-babel');
var minify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
const fs = require('fs');
const path = require('path');
const browserify = require('browserify');
const watchify = require('watchify');
const fsPath = require('fs-path');

var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var es2015 = require('babel-preset-es2015');

function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function (file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

const paths = [
    process.env.INIT_CWD + '\\ViewModels\\home',
    process.env.INIT_CWD + '\\ViewModels\\home\\components',
    process.env.INIT_CWD + '\\ViewModels\\common\\components'
];

function watchFolder(input, output) {
    var b = browserify({
        entries: [input],
        cache: {},
        packageCache: {},
        plugin: [watchify],
        basedir: process.env.INIT_CWD,
        paths: paths
    });

    function bundle() {
        b.bundle()
            .pipe(source('bundle.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(minify())
              .on('error', gutil.log)
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(output));

        gutil.log("Bundle rebuilt!");
    }
    b.on('update', bundle);
    bundle();
}

function compileJS(input, output) {
    // set up the browserify instance on a task basis
    var b = browserify({
        debug: true,
        entries: [input],
        basedir: process.env.INIT_CWD,
        paths: paths
    });

    return b.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(babel({ compact: false, presets: ['es2015'] }))
        // Add transformation tasks to the pipeline here.
        .pipe(minify())
        .on('error', gutil.log)
        //.pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(output));
}

const scriptsPath = 'ViewModels';

gulp.task('build', function () {
    var folders = getFolders(scriptsPath);
    gutil.log(folders);
    folders.map(function (folder) {
        compileJS(scriptsPath + "//" + folder + "//main.js", "Scripts//app//" + folder);
    });
});

gulp.task('default', function () {
    var folders = getFolders(scriptsPath);
    gutil.log(folders);
    folders.map(function (folder) {
        watchFolder(scriptsPath + "//" + folder + "//main.js", "Scripts//app//" + folder);
    });

});

顺便说一句，我对vs框架非常陌生，我试图将此框架与ASP .NET MVC集成。我无法弄清楚我做错了什么？如果有人回答我，我将非常感激。

Answer 1

肯定不是答案，但我拒绝使用gulp。相反，我已经安装了webpack。现在好了！

在main.js中导入库时发生错误

1 个答案: