Глобальные переменные webpack

162

03 июля 2019, 17:00

Структура js файла

var test = 123;
require ('./custom/components/buttons.js');
require ('./custom/components/fixed-buttons.js');
require ('./custom/components/tabs.js');
require ('./custom/components/accordions.js');
require ('./custom/components/sliders');

Затем если перейти в sliders.js и сделать console.log, то будет такая ошибка:

sliders.js:296 Uncaught ReferenceError: test is not defined at Object.434 (sliders.js:296) at webpack_require (bootstrap 5dd9c166f83054f151df:54) at Object.171 (main.js:15) at webpack_require (bootstrap 5dd9c166f83054f151df:54) at webpackJsonpCallback (bootstrap 5dd9c166f83054f151df:25) at main.js?v=1545639314088:1

Answer 1

В контексте вопроса: для использования переменной в test в другом модуле(файле) можно использовать экспорт и импорт согласно спецификации ES-2015:

//globals.js
export const test = 123;
//main.js
import { test } from 'globals'

Или используем ключевое слово default для экспорта только одного значения(фигурные скобки не нужны):

//globals.js
const test = 123;
export default test;
//main.js
import test from 'globals'

Рекомендую в данном случае использовать Webpack в сочетании с транспилятором babel.

Webpack также предлагает способ в синтаксисе CommonJS, который Вы использовали. Знакомо будет тем, кто работал с NodeJS:

//globals.js
var test = 123;
module.exports = test;
//main.js
var test = require('globals');

При том, Вы можете использовать оба варианта одновременно. Более подробно о всех способах подключения модулей здесь.

Если же необходимо экспортировать переменную в глобальную область после сборки проекта, то это выглядит примерно так:

//Более простой способ
//index.js
function App() {}
window.App = App;

или

//index.js
export default function App() {}
//Указываем в конфиге
//webpack.config.js
module.exports = {
    ...
    output: {
        ...
        library: 'App',
        libraryTarget: 'window',
        libraryExport: 'default'
        ...
    }
    ...    
}