代码之家  ›  专栏  ›  技术社区  ›  Petr TomáÅ¡ek

网页包节点。js API和ES6

  •  0
  • Petr TomáÅ¡ek  · 技术社区  · 7 年前

    我已经在ES6中创建了节点API网页包编译器。没有es6,一切都很好。但如果我使用es6,我会得到:

    [13:29:41] TypeError: Cannot read property 'concat' of undefined
    at new NormalModuleFactory (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/NormalModuleFactory.js:115:51)
    at Compiler.createNormalModuleFactory (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/Compiler.js:586:31)
    at Compiler.newCompilationParams (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/Compiler.js:603:30)
    at Compiler.compile (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/Compiler.js:611:23)
    at readRecords.err (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/Compiler.js:284:11)
    at Compiler.readRecords (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/Compiler.js:479:11)
    at hooks.run.callAsync.err (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/Compiler.js:281:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/private/var/www/MyProject/legacy/shop/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/private/var/www/MyProject/legacy/shop/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.beforeRun.callAsync.err (/private/var/www/MyProject/legacy/shop/node_modules/webpack/lib/Compiler.js:278:19)
    
    Process finished with exit code 1
    

    这是我的代码:

    import {Compiler} from 'webpack';
    const config = require("./config/webpack.config");
    
    class WebpackCompiler {
        constructor(context) {
            this.config = config;
            this.compilerOptions = {};
            this.compiler = new Compiler(context);
        }
    
        start() {
            this.compiler.options = Object.assign({}, this.config, this.compilerOptions);
            this.compiler.run().then((stats) => this._handleStats(stats)).catch((err) => this._handleErrors(err));
        }
    
        setOutput(output) {
            this.compilerOptions.output = output;
        }
    
        setEntries(entires) {
            this.compilerOptions.entry = entires;
        }
    
        _handleStats(stats) {
            const statsErrors = stats.toJson();
    
            if (stats.hasErrors()) {
                console.error(statsErrors.errors.toString({
                    chunks: false,
                    colors: true
                }));
            }
    
            if (stats.hasWarnings()) {
                console.warn(statsErrors.warnings.toString({
                    chunks: false,
                    colors: true
                }));
            }
        }
    
        _handleErrors(err) {
            if (err) {
                console.error(err.stack || err);
                if (err.details) {
                    console.error(err.details);
                }
                return;
            }
        }
    }
    
    export const CompilerFactory = {
        create: function (context) {
            return new WebpackCompiler(context);
        }
    }
    

    在这之后,类似这样的事情:

     var compiler = CompilerFactory.create(WEBPACK_CONTEXT);
        compiler.setEntries({bundle: "./js/main.js"});
        compiler.setOutput("./js/compiled");
        compiler.start();
    

    和简单的网页包配置:

    const path = require('path');
    const sourcePath = path.resolve("MY_PATH_TO_ROOT");
    
    const mode = process.env.NODE_ENV === 'production' || "development";
    
    module.exports = {
        mode: mode,
        node: {
            __dirname: true
        },
        watchOptions: {
            poll: true
        },
        devtool: "eval",
        entry: {},
        output: {
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.(js)$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                sourceMaps: true
                            }
                        }
                    ]
                }
            ]
        },
    
        externals: {
            "jquery": "jQuery"
        },
    
        resolve: {
            modules: [
                path.resolve(sourcePath, 'node_modules')
            ]
        }
    };
    

    问题是在调用方法之后 Run() .在NormalModuleFactory中。js,问题在这一行:

    this.ruleSet = new RuleSet(options.defaultRules.concat(options.rules));
    

    正如我所说,关于使用ES6的网页文档中没有太多信息。你们都知道问题出在哪里吗? 谢谢你抽出时间。

    0 回复  |  直到 7 年前
    推荐文章