Почему функция get не определена после компиляции с помощью webpack и babel? - PullRequest
Новая
       13

Почему функция get не определена после компиляции с помощью webpack и babel?

1 голос
/ 27 июня 2019

Я пытаюсь скомпилировать проект javascript, который использует синтаксис ES6 и ES5 для ES5, используя babel и webpack.При этом я продолжаю получать «Uncaught ReferenceError: [функция] не определена».

Я исследовал эту тему здесь и на других сайтах, но не могу найти решение.Вот мой код.

test.js 

runTest('hello');

test2.js 

function runTest(statement) {
    console.log("test running: ", statement);
}

main.js 

require('./test2');
require('./test');

bundle.js (где кодвывод на) 

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),n(2)},function(e,t){},function(e,t){runTest("hello")}]);

webpack.config.js 

const path = require('path');
const webpack = require('webpack');
const webpack_rules = [];
const webpackOption = {
    entry: './Scripts/es6/main.js',
    output: {
        path: path.resolve(__dirname, './Scripts/build'),
        filename: 'bundle.js'
    },
    module: {
        rules: webpack_rules
    }
};

let babelLoader = {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }
};
webpack_rules.push(babelLoader);
module.exports = webpackOption;

Я знаю, что ни один из моих тестовых кодов на самом деле не является кодом ES6.Реальный код, который я пытаюсь скомпилировать, представляет собой смесь ES5 и ES6, и эта часть, кажется, компилируется нормально.Я также попытался добавить console.log ('test') и console.log ('test2') к каждому из файлов, и я вижу оба журнала, так что я знаю, что файлы компилируются.

EDIT: Inв свете ответа Куинтена, может быть, я не на том пути.Я пытаюсь взять все мои файлы JavaScript (некоторые с использованием ES5 и некоторые с использованием синтаксиса ES6) и скомпилировать их в один файл ES5, который будет работать в IE11 и более новых браузерах.Есть ли что-то другое, что я должен делать?

1 Ответ

1 голос
/ 27 июня 2019

Кажется, вы думаете, require вставит код из модуля вместо оператора require.Это не так, require() копирует экспорт из модуля и возвращает его.

Итак, test2.js необходимо экспортировать функцию, а test.js - ее импортировать.Это лишает смысла третий файл.

main.js 

const runTest = require("./test1.js");
runTest('hello');

test1.js 

function runTest(statement) {
    console.log("test running: ", statement);
}

module.exports = runTest;
...