объем файла jp-пакета webpack - файл функций импорта

Question

объем файла jp-пакета webpack - файл функций импорта

1

Я учусь использовать webpack в первый раз. Я действительно застрял с чем-то, что никогда не было проблемой с gulp, так это то, как он использует разные файлы.

У меня есть файл, содержащий несколько автономных функций (helpers.js).

function a() {
}
function b() {
}
function c() {
}

Основываясь на моем чтении здесь, мне нужно импортировать каждую функцию отдельно? Как импортировать весь файл?

Из примера в ссылке:

a.js:

export var a = 4;

b.js

import { a } from "./b.js";
var b = a+1;
console.debug(b);

TheRealPapa 09 авг. 2017, в 05:08

Источник

0

Попробуйте с помощью import { a } from "./b"; (не заканчивается на .js )
Vayne 09 авг. 2017, в 02:16
0

Извините, Алан, вопрос в том, как импортировать внешний файл с функциями и сделать каждую функцию доступной для глобальной области видимости. То же, что глобальные переменные
TheRealPapa 09 авг. 2017, в 02:18
0

лол. Извините, я не прочитал ваш вопрос :). Вы можете задать этот вопрос: Опции экспорта модуля ES6 + javascript, я думаю, что это хорошо, чтобы начать.
Vayne 09 авг. 2017, в 02:27

Показать ещё 1 комментарий

Теги:

javascript

webpack

1 ответ

Ещё вопросы

Попробуйте с помощью import { a } from "./b"; (не заканчивается на .js )
Извините, Алан, вопрос в том, как импортировать внешний файл с функциями и сделать каждую функцию доступной для глобальной области видимости. То же, что глобальные переменные
лол. Извините, я не прочитал ваш вопрос :). Вы можете задать этот вопрос: Опции экспорта модуля ES6 + javascript, я думаю, что это хорошо, чтобы начать.

Marian Gibala · Accepted Answer · 2017-08-09T01-48-00.000Z

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

Поэтому в вашем примере мы можем сделать это следующим образом:

Создайте экспорт по умолчанию в файле helpers.js и определите, какие данные экспортировать.

helpers.js

function a(){}
function b(){}
function c(){}

export default {a,b,c}

И импортируйте данные таким образом:

import myHelpers from 'helpers'

Затем, чтобы использовать помощник a, вам нужно будет вызвать myHelpers.a()

Другой подход заключается в создании "названного" экспорта

helpers.js:

export function a(){}
export function b(){}
export function c(){}

Чтобы импортировать все данные, используйте:

import * as myHelpers from 'helpers'

Затем, как и в предыдущем примере, вызовите → myHelpers.a()

Но набирать "myHelpers" не всегда удобно, поэтому здесь мы можем использовать именованный экспорт дополнительной выгоды - вы можете импортировать его по имени, чтобы мы могли сделать это следующим образом:

import {a,b,c} from 'helpers'

Затем вы можете вызвать()

Вы должны ввести все имена, которые хотите импортировать. Для этого нет "ярлыка".

Почему так?

лучше контролировать то, что именно вы импортируете в свой код, необязательное "дрожание дерева",
конфликтов между импортированными модулями

Webpack - ProvidePlugin

Хорошо, но что, если вы часто используете этих помощников? Вам нужно импортировать их повсюду? Технически - да. Но Webpack может автоматизировать это для нас, посмотрите на Webpack - ProvidePlugin, который автоматически загружает модули, а не импортирует их везде.

Для Webpack 3, если вы пойдете с первым решением, это будет выглядеть так:

new webpack.ProvidePlugin({
  helpers:['path/to/module/helpers', 'default'],
}),

Это сделает помощников доступными как "глобальные", и вы сможете использовать helpers.a()