Я учусь использовать 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);
Я подозреваю, что вы использовали какой-то конкатенационный плагин для глотки, и ваша область была "разделена". С модулями ES6 вы должны точно определить, какие функции экспортировать и импортировать, поскольку объем каждого файла является отдельным.
Поэтому в вашем примере мы можем сделать это следующим образом:
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()
import { a } from "./b";
(не заканчивается на.js
)