Ошибка при выполнении веб-пакета из задачи gulp - PullRequest
Новая
       6

Ошибка при выполнении веб-пакета из задачи gulp

0 голосов
/ 09 ноября 2018

Я изучаю веб-пакет и хотел бы иметь задачу gulp для его запуска, чтобы позже я мог включить эту задачу в мой конвейер сборки VS2017.

Вот задача с именем webpackBundlesJs, которую я кодировал на gulpfile.js: 

gulp.task(
    "webpackBundlesJs",
    function () {
        var webpackStream = require("webpack-stream");
        var webpackConfig = require("./React/webpack.dev.config");

        return gulp
            .src([])
            .pipe(webpackStream(webpackConfig))
            .pipe(gulp.dest("Scripts/bundles/", { "mode": "0777" }));
    }
);

Когда я выполняю это задание gulp из VS2017 Explorer Runner Explorer, я получаю следующий вывод с ошибкой: 

C:\Desenv\SGC\Sgc.Web\Sgc.Web> cmd.exe /c gulp -b "C:\Desenv\SGC\Sgc.Web\Sgc.Web" --color --gulpfile "C:\Desenv\SGC\Sgc.Web\Sgc.Web\Gulpfile.js" webpackBundlesJs
[17:29:13] Using gulpfile C:\Desenv\SGC\Sgc.Web\Sgc.Web\Gulpfile.js
[17:29:13] Starting 'webpackBundlesJs'...
(node:14360) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'default' of undefined
    at C:\Desenv\SGC\Sgc.Web\Sgc.Web\node_modules\loader-runner\lib\loadLoader.js:4:67
    at <anonymous>
(node:14360) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:14360) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error: ./React/MenuSidebar/App.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
(SystemJS) ENOENT: no such file or directory, open 'C:\Desenv\SGC\Sgc.Web\Sgc.Web\C:\Desenv\SGC\Sgc.Web\Sgc.Web\node_modules\ts-loader\index.js'
    Error: ENOENT: no such file or directory, open 'C:\Desenv\SGC\Sgc.Web\Sgc.Web\C:\Desenv\SGC\Sgc.Web\Sgc.Web\node_modules\ts-loader\index.js'
    Error loading C:/Desenv/SGC/Sgc.Web/Sgc.Web/C:\Desenv\SGC\Sgc.Web\Sgc.Web\node_modules\ts-loader\index.js
Process terminated with code 1.

Как вы видите, проблема, похоже, в том, что путь к загрузчику ts неверен, поскольку он предполагает 

C:/Desenv/SGC/Sgc.Web/Sgc.Web/C:\Desenv\SGC\Sgc.Web\Sgc.Web\node_modules\ts-loader\index.js

вместо правильного в 

C:\Desenv\SGC\Sgc.Web\Sgc.Web\node_modules\ts-loader\index.js

Что мне нужно сделать, чтобы исправить эту ошибку? где я должен шутить? webpack или его плагин npm webpack-stream или tsconfig.json?

Вот расположение соответствующих файлов:

  • в папке C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web У меня есть веб-проект VS2017 с именем Sgc.Web
  • в папке C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web У меня также есть gulpfile.js и package.json
  • папка C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ node_modules содержит модули узлов
  • Я использую веб-пакет для создания пакета React JavaScript для приложения React; MenuSidebar этого приложения React находится в папке C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ React \ MenuSidebar
  • папка C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ React содержит файлы tsconfig.json (предназначенные только для приложений React), webpack.generic.config.js (общие параметры конфигурации веб-пакета) и webpack.dev.config.js (специфичные для разработки параметры конфигурации веб-пакета, которые необходимо объединить с webpack.generic.config.js).

А теперь вышеупомянутые файлы содержимого:

  • C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ gulpfile.js 
...
gulp.task(
    "webpackBundlesJs",
    function () {
        var webpackStream = require("webpack-stream");
        var webpackConfig = require("./React/webpack.dev.config");

        return gulp
            .src([])
            .pipe(webpackStream(webpackConfig))
            .pipe(gulp.dest("Scripts/bundles/", { "mode": "0777" }));
    }
);
  • C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ package.json: 
{
   ...   
   "dependencies": {
    ...
    "react": "16.5.0",
    "react-dom": "16.5.0",
    "redux": "4.0.0",
    "react-redux": "5.0.7",
    ...   },   "devDependencies": {
    ...
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    ...
    "gulp": "3.9.1",
    ...
    "systemjs-builder": "0.16.13",
    "systemjs-plugin-text": "0.0.11",
    "ts-loader": "5.1.0",
    ...
    "typescript": "3.0.3",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "4.18.0",
    "webpack-cli": "3.1.0",
    "webpack-manifest-plugin": "2.0.4",
    "webpack-merge": "^4.1.4",
    "webpack-stream": "^5.1.1"   
  } 
}
  • C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ Реагировать \ tsconfig.json 
 {
      "compilerOptions": {
        "target": "es5",
        "lib": [ "es5", "dom", "scripthost", "es2015" ],
        "module": "commonjs",
        "moduleResolution": "node",
        "jsx": "react",
        "sourceMap": true,
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false
      },
      "exclude": [
        "../node_modules"
      ]
    }
  • C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ Реагировать \ webpack.generic.config.js 
const path = require("path"); 
const ManifestPlugin = require("webpack-manifest-plugin");

function getGenericConfig() {
    let genericConfig = {};

    genericConfig.entry = {
        "MenuSidebarReact": "./React/MenuSidebar/App.tsx"
    };

    genericConfig.output = {
        "path": path.resolve(__dirname, "../Scripts/bundles"),
        "libraryTarget": "var",
        "library": "lib[name]"
    };

    // only output when errors happen
    genericConfig.stats = "errors-only",

    genericConfig.resolve = {
        "extensions": [".ts", ".tsx", ".js"]
    };

    //#region Optimization (chunks)

    const genericReact = {
        "chunks": "all",
        "name": "GenericReact",
        test(chunks) {
            ...
            };
            return checkResource(chunks);
        },
        "reuseExistingChunk": true,
        "enforce": true
    };

    const vendorReact = {
        chunks: "all",
        name: "VendorReact",
        test(chunks) {
            var checkResource = null;

            checkResource = function (value) {
                ...
                return false;
            };

            return checkResource(chunks);
        },
        reuseExistingChunk: true,
        enforce: true
    };

    const vendorRedux = {
        chunks: "all",
        name: "VendorRedux",
        test(chunks) {
            var checkResource = null;

            checkResource = function (value) {
                ...
            };

            return checkResource(chunks);
        },
        reuseExistingChunk: true,
        enforce: true
    };

    genericConfig.optimization = {
        "splitChunks": {
            "cacheGroups": {
                "GenericReact": genericReact,
                "VendorReact": vendorReact,
                "VendorRedux": vendorRedux
            }
        }
    };

    //#endregion

    //#region Modules

    const tsLoader = {
        "test": /\.tsx?$/,
        "loader": "ts-loader"
    };

    const babelLoader = {
        "test": /\.(js|jsx)$/,
        "exclude": /node_modules/,
        "use": [{
            "loader": "babel-loader",
            "options": {
                "presets": ["es2015", "react"],
                "cacheDirectory": true
            }
        }]
    };

    genericConfig.module = {
        "rules": [tsLoader, babelLoader]
    };

    //#endregion

    //#region Plugins

    const manifestPlugin = new ManifestPlugin({
        "fileName": "bustersWebpackJs.json",
        "map": funcManifestPluginCorrectKeysValues
    });

    genericConfig.plugins = [manifestPlugin];

    //#endregion

    return genericConfig;  }

module.exports = getGenericConfig();
  • C: \ Desenv \ SGC \ Sgc.Web \ Sgc.Web \ Реагировать \ webpack.dev.config.js: 
const merge = require("webpack-merge");
const genericConfig = require("./webpack.generic.config.js");

/**
 * Get the specific webpack configuration object for a DEVelopment build, that makes only non minified JS files.
 * @returns {Object} dev specific webpack config object.
 */
function getNonMinifiedConfig() {
    let nonMinConfig = {};

    // by default this option ensures that files won't be minified !
    nonMinConfig.mode = "development";

    nonMinConfig.output = {};
    nonMinConfig.output.filename = "[name].js?[chunkhash]";
    nonMinConfig.output.chunkFilename = nonMinConfig.output.filename;

    return nonMinConfig;
}

module.exports = merge(genericConfig, getNonMinifiedConfig());

любая идея или намек на то, где проблема, высоко ценится. Заранее спасибо, Мигель.

...