Добавьте модуль в пакет webpack, но не загружайте его [duplicate]

Question

Добавьте модуль в пакет webpack, но не загружайте его [duplicate]

Попробуйте

if ($_POST['submit']) {
    $success= mail($to, $subject, $body, $from);
    if($success)
    { 
        echo '
        <p>Your message has been sent!</p>
        ';
    } else { 
        echo '
        <p>Something went wrong, go back and try again!</p>
        '; 
    }
}

112

javascript webpack ecmascript-6

задан ericsoco 1 April 2016 в 23:45

5 ответов

Вы не можете импортировать условно, но вы можете сделать обратное: экспортировать что-то условно. Это зависит от вашего прецедента, поэтому эта работа может быть не для вас.

Вы можете сделать:

api.js

import mockAPI from './mockAPI'
import realAPI from './realAPI'

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer. js

import API from './api'
...

Я использую это, чтобы издеваться над аналитическими библиотеками, такими как mixpanel и т. д. ... потому что в настоящее время я не могу иметь несколько построек или наш интерфейс. Не самый элегантный, но работает. У меня просто есть несколько «если» здесь и там в зависимости от среды, потому что в случае mixpanel ему нужна инициализация.

27

ответ дан Amida 22 August 2018 в 17:16

1

Это решение вызывает загрузку нежелательных модулей, поэтому я думаю, что это не оптимальное решение. – ismailarilik 11 November 2017 в 08:24
2

Как указано в ответе, это обход. В то время решения просто не было. Импорт ES6 не является динамичным, это по дизайну. Предложение ES6 для динамического импорта, которое описано в принятом в настоящее время ответе, может это сделать. JS развивается :) – Amida 12 November 2017 в 10:33

Если вы хотите, вы можете использовать require. Это способ иметь условный запрос require.

let something = null;
let other = null;

if (condition) {
    something = require('something');
    other = require('something').other;
}
if (something && other) {
    something.doStuff();
    other.doOtherStuff();
}

64

ответ дан BaptWaels 22 August 2018 в 17:16

1

Я думаю, что что-то и другие переменные объявляются с помощью const, который является блочным областью, поэтому второе условие if будет бросать, что что-то не определено – Mohammed Essehemy 9 April 2018 в 12:49
2

Спасибо @MohammedEssehemy, я отредактировал свой ответ – BaptWaels 10 April 2018 в 10:02
3

Это правильный ответ. – lucasarruda 10 April 2018 в 20:25
4

Было бы лучше использовать let и объявить две переменные за пределами блока вместо использования «var» и вообще избегать области блока. – Vorcan 12 April 2018 в 07:12
5

– Thomas 11 October 2018 в 13:18

Похоже, что ответ заключается в том, что на данный момент вы не можете.

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

Я думаю, что цель состоит в том, чтобы максимально использовать статический анализ, и условно импортированные модули нарушают это. Также стоит упомянуть - я использую Babel , и я предполагаю, что System не поддерживается Babel, потому что API загрузчика модуля не стал стандартом ES6.

9

ответ дан ericsoco 22 August 2018 в 17:16

1

Думаю, вы ищете github.com/ModuleLoader/es6-module-loader . – Felix Kling 2 April 2016 в 00:34
2

@FelixKling делает это своим собственным ответом, и я с радостью соглашусь с этим! – ericsoco 4 April 2016 в 16:18

, затеняя его в eval, работал для меня, скрывая его от статического анализатора ...

if (typeof __CLI__ !== 'undefined') {
  eval("require('fs');")
}

-1

ответ дан Liam 22 August 2018 в 17:16

Другие вопросы по тегам:

javascript webpack ecmascript-6

Похожие вопросы:

Это решение вызывает загрузку нежелательных модулей, поэтому я думаю, что это не оптимальное решение. — ismailarilik, 11 November 2017 в 08:24
Как указано в ответе, это обход. В то время решения просто не было. Импорт ES6 не является динамичным, это по дизайну. Предложение ES6 для динамического импорта, которое описано в принятом в настоящее время ответе, может это сделать. JS развивается :) — Amida, 12 November 2017 в 10:33
Я думаю, что что-то и другие переменные объявляются с помощью const, который является блочным областью, поэтому второе условие if будет бросать, что что-то не определено — Mohammed Essehemy, 9 April 2018 в 12:49
Спасибо @MohammedEssehemy, я отредактировал свой ответ — BaptWaels, 10 April 2018 в 10:02
Было бы лучше использовать let и объявить две переменные за пределами блока вместо использования «var» и вообще избегать области блока. — Vorcan, 12 April 2018 в 07:12
Думаю, вы ищете github.com/ModuleLoader/es6-module-loader . — Felix Kling, 2 April 2016 в 00:34
@FelixKling делает это своим собственным ответом, и я с радостью соглашусь с этим! — ericsoco, 4 April 2016 в 16:18

score 47 · Accepted Answer

Теперь у нас есть предложение динамического импорта с ECMA. Это находится на этапе 3. Это также доступно как babel-preset .

Ниже приведен способ сделать условный рендеринг в соответствии с вашим случаем.

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

Это в основном возвращает обещание. Ожидается, что ожидается, что модуль обещания получит модуль. В предложении также есть другие функции, такие как множественный динамический импорт, импорт по умолчанию, импорт js-файла и т. Д. Здесь вы можете найти более подробную информацию о динамических импортерах здесь .

47

ответ дан thecodejack 22 August 2018 в 17:16

1

Наконец, реальный ответ ES6! Спасибо @ thecodejack. Фактически на этапе 3 на момент написания этой статьи, согласно этой статье сейчас. – ericsoco 9 October 2017 в 04:37
2

да, подтвердил ответ – thecodejack 11 October 2017 в 08:42
3

или если вы только что назвали экспорт, вы можете разрушить: if (condition) { import('something') .then(({ somethingExported }) => { console.log(somethingExported); }); } – ivn 23 March 2018 в 15:56
4

на Firefox и во время работы npm run build я все еще получаю ошибку: SyntaxError: ... 'import' and 'export' may only appear at the top level – ste 30 May 2018 в 07:27