Как импортировать npm-модули при помощи require.js?

318
19 июня 2017, 22:23

Привет. Как правильно импортировать модули npm в браузер? Использую npm с Babel, где после установки модуля я прописал import 'webpack';, что в транспилированном коде равняется require('webpack');. Я подключил к странице транспилированный index.js и получил ошибку requeire is not defined. Долго пытался понять, как же мне импортировать модули и наткнулся на ответ, где сказано, что лучше всего использовать для таких целей WebPack. Что ж, так и сделал - ввёл npm i webpack --save, но погоды это не сделало. Попытался подключить на странице requeirejs через <script>, но получил гору ошибок в консоли и Module name "webpack" has not been loaded yet for context. Что я делаю не так и правильно ли я делаю вообще, что пытаюсь подключить к странице транспилированный код?

Answer 1

Синтаксис import:

import {one, two} from "./nums";

Здесь:

./nums> – модуль, как правило это путь к файлу модуля. one, two – импортируемые переменные, которые должны быть обозначены в nums словом export. В результате импорта появятся локальные переменные one, two, которые будут содержать значения соответствующих экспортов.

Например, при таком файле nums.js:

export let one = 1;
export let two = 2;

Модуль ниже выведет «1 and 2»:

import {one, two} from "./nums";
alert( `${one} and ${two}` ); // 1 and 2

Импортировать можно и под другим именем, указав его в «as»:

// импорт one под именем item1, а two – под именем item2
import {one as item1, two as item2} from "./nums";
alert( `${item1} and ${item2}` ); // 1 and 2

Импорт всех значений в виде объекта Можно импортировать все значения сразу в виде объекта вызовом import * as obj, например:

import * as numbers from "./nums";
// теперь экспортированные переменные - свойства numbers
alert( `${numbers.one} and ${numbers.two}` ); // 1 and 2
READ ALSO
Как получить листинг директории с chrome extension api

Как получить листинг директории с chrome extension api

Любым способом, с любыми разрешениями

311
Мини-планкер с одной html

Мини-планкер с одной html

Использую Angular 2 + bootstrapМне необходимо сделать страницу на которой будет окошко с html разметкой в виде текста (желательно с отступами и подсветкой...

167