1

Структура 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

9
  • Нужно сделать экспорт переменной test и импортировать в sliders.js
    – Doigrales
    24 дек 2018 в 8:53
  • Создал отдельно файл vendor.js, а в main.js написал import test from './vendor' и ничего не произошло. В консоли пустые скобки без значения {}
    – stiv
    24 дек 2018 в 8:55
  • а в vendor.js так сделали: export var test = 123; ?
    – Doigrales
    24 дек 2018 в 9:01
  • Получилось, но сделал так. Обязательно var писать? exports.test = 123;
    – stiv
    24 дек 2018 в 9:07
  • 1
    Конечно, ответ, если есть в нем необходимость, опубликую чуть позже.
    – Doigrales
    24 дек 2018 в 9:32

1 ответ 1

5

В контексте вопроса: для использования переменной в 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'
        ...
    }
    ...    
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.