Question

我有一个节点应用程序，在构建时将其全部捆绑到一个文件中。我想从这个捆绑包中分离出应用程序配置参数（这只是一个简单的对象）。

./build目录中仅包含三个文件：index.js，config.js和一个映射文件。

当我cd进入目录并使用node index.js启动应用程序时，出现以下错误：

TypeError: Cannot read property 'logPath' of undefined
    at Module.<anonymous> (/home/*/repo/build/index.js:1:2367)
    at t (/home/*/repo/build/index.js:1:172)
    at /home/*/repo/build/index.js:1:964
    at Object.<anonymous> (/home/*/repo/build/index.js:1:973)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

内置的config.js文件的顶部看起来像

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.config = {
    logPath: 'logs',
    ....
};

我正在使用的webpack配置如下

const path = require('path');
const nodeExternals = require('webpack-node-externals');

function excludeConfig(context, request, callback) {
    /config/.test(request)
        ? callback(null, 'require("./config.js")', + request)
        : callback();
}

module.exports = {
    entry: {
        index: path.resolve(__dirname, './src/server/index.js')
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader',
                exclude: ['node_modules']
            }, {
                test: /\.js$/,
                loader: 'source-map-loader',
                enforce: 'pre'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
        modules: [path.resolve(__dirname, 'node_modules')]
    },
    devtool: 'source-map',
    output: {
        filename: 'index.js',
        path: path.join(__dirname, '/build')
    },
    mode: 'production',
    target: 'node',
    externals: [
        nodeExternals(),
        excludeConfig
    ],
};

gulp 使用以下策略构建我的配置文件

const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');
gulp.task('add-config', function () {
    return gulp
        .src('src/*config.ts')
        .pipe(tsProject())
        .pipe(gulp.dest('build'));
});

tsconfig.json文件如下所示：

{
    "compilerOptions": {
        "outDir": "./build",
        "allowJs": true,
        "checkJs": false,
        "module": "commonjs",
        "target": "es5",
        "moduleResolution": "node",
        "lib": ["es2015", "dom"]
    }
}

我的直觉是，在构建之后，配置文件未提供捆绑软件的期望。

该捆绑包确实包含以下行：

function (e, r) { e.exports = require("./config.js") }

关于如何使捆绑包加载config.js文件的任何想法？

Answer 1

似乎经过大量静态分析，并且对导入模块的不同方式缺乏全面的了解，由于某种原因，捆绑软件将我的配置文件定义为和谐导入，并尝试从中检索default文件（在我的情况下我没有）。

有两个修复程序（都很好用）：

通过在导入周围使用方括号将导入样式更改为不使用默认样式（我不知道为什么要这么做）

import { config } from './../../config';

更改导出样式并采用默认路线

export default <Config>{
    logPath: 'logs',
    ...
};

说实话，我不知道为什么在这个项目还没有开始向TypeScript迁移之前就可以使用它。我知道所有 babel 相关内容在我开始之前都已删除，因此我无法理解。

Webpack内部构件

模块加载器如下：

(function(module, exports) {
    module.exports = require("./config.js");
})

然后将其传递到另一个模块并按以下方式加载：

/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./../../config */ "./../config");
/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_config__WEBPACK_IMPORTED_MODULE_1__);
const PATH = _config__WEBPACK_IMPORTED_MODULE_1___default.a.logPath.replace(/\/*$/, '');

请注意_config__WEBPACK_IMPORTED_MODULE_1__如何已经具有我的配置对象的内容。但是，webpack将其发送到函数n中，该函数将导入封装到成员a上的getter函数中。如果模块被标记为default

，则此封装解析为使用esModule。

__webpack_require__.n = function(module) {
    var getter = module && module.__esModule ?
        function getDefault() { return module['default']; } :
        function getModuleExports() { return module; };
    __webpack_require__.d(getter, 'a', getter);
    return getter;
};

我可以从捆绑的javascript应用程序加载文件吗？

1 个答案:

Webpack内部构件