Использовать npm для копирования интерфейсных модулей в каталог верхнего уровня

Question

Я конвертировал в npm для моей системы сборки: без gulp и т. Д. Также нет webpack, rollup и т. Д., Это система es6, основанная на модулях & без комплектации. Конечно, просто!

Очевидно, что я не хочу перетаскивать иерархию node_modules для своих модулей внешнего интерфейса. И не хочу import foo from './node_modules/god/awful/path.js'. Поэтому я хотел бы иметь каталог верхнего уровня для зависимостей во время выполнения, front-end.

Так как мне скопировать мои «зависимости», а не «devDependencies», в каталог верхнего уровня для развертывания?

У меня есть сценарий запуска, который может это сделать, но это довольно грязно, и расположение пакета под node_modules не всегда очевидно. Может быть, есть пакет для этого автоматически? Или какой-нибудь изящный трюк?

Answer 1

ОК, я начинаю нуждаться в этом даже больше, чем раньше, поэтому подумал, что я буду пилить и быть более ясным, чем я, похоже, вынужден заниматься.

Прежде всего, я не использую диспетчеры задач рабочего процесса, просто запускаю скрипты npm в package.json.

Моей зависимости (НПЙ --save .. не --save-DEV) являются:

"dependencies": { 
    "lzma": "^2.3.0", 
    "pako": "^1.0.0", 
    "three": "*" 
}, 

.. и мои скрипты Cli для грузоподъемных зависимостей в топе LIBS уровня/реж просто огромная ф:

"build-deps": "cp 
node_modules/lzma/src/lzma.js 
node_modules/lzma/src/lzma_worker.js 
node_modules/pako/dist/pako.min.js 
node_modules/three/build/three.js 
node_modules/three/build/three.min.js 
node_modules/three/examples/js/controls/OrbitControls.js 
node_modules/three/examples/js/controls/FlyControls.js 
node_modules/three/examples/js/controls/FirstPersonControls.js 
node_modules/three/examples/js/libs/stats.min.js 
node_modules/three/examples/js/libs/dat.gui.min.js 
libs/", 

Это довольно примитивно: Я должен найти зависимости в node_modules (не всегда очевидно) и добавить их в список вручную. Конечно, мне нужно меньше зависимостей! :)

Я знаю, что беседка предназначена для зависимостей «переднего конца» (--save в npm говорить). Но похоже, что npm будет идеально подходит для зависимостей, и все же кажется, что я должен быть этим примитивным.

Что мне здесь не хватает? Чем ты занимаешься?

Answer 2

Это то, с чем я боролся в своих ранних набегах в разработку с помощью пакетов Node. У меня была та же самая идея, что и у вас: «Я могу использовать npm, чтобы тянуть все, что мне нужно для моего проекта, отлично!» а затем попытаться управлять тем, как я ссылаюсь на каждую из моих зависимых библиотек. В то время я не правильно понимал, что npm не просто помогает мне получить мои зависимости, но и помочь мне справиться с ними.

Вот длинный &: вы НЕ хотите копировать что-либо из папки node_modules в другое, более удобное для пользователя место. Существует много причин, но самым большим является то, что вы не нуждаетесь в , нужно, чтобы скопировать что-либо из node_modules - все, что нужно вашему проекту, находится прямо там.

Когда вы разрабатываете в ECMAScript 2015+ вы должны только когда-либо сделать следующие (извинения за чрезмерно упрощенным кода):

/* N.B. These all reside under node_modules, yet I don't 
 
*  have to spell out their paths under node_modules: */ 
 

 
import $ from 'jquery'; 
 
import _ from 'lodash'; 
 
import moment from 'moment'; 
 
import NiftyLibrary from 'niftywhatever'; 
 

 
// ... code ... 
 

 
let $name = $('#name'); 
 
let now = moment(); 
 

 
// ... other code ...

Другими словами, ваш настройка среды разработки должна просто обрабатывать разрешение модуля для вас. Вам не нужно указывать, что библиотека jQuery, которую вы хотите использовать, находится в «node_modules/jquery/dist/jquery.min.js».Если вы это делаете, вы должны потратить минуту, чтобы понять, почему вы это делаете - это не нужно, это время и мозг, и вы предпочитаете писать код приложения, а не управлять своими зависимостями ... НЕ управляет деревом node_modules.

Вы упомянули, что разрабатываете модули ES6, но не используете webpack, gulp, Grunt, rollup или любой другой инструмент сборки или связывания. Ваш проект должен работать целиком в узле? Я спрашиваю, потому что последние, что я слышал, большинство браузеров не совсем готовы запускать модули ES6 изначально. Итак, как ваши модули передаются в ES5? Возможно, вы приближаетесь к этому по-новому, о котором я еще не слышал, но по моему опыту необходим инструмент сборки или связывания. (Кроме того, это очень весело.)

Я использовал Grunt с RequireJS в прошлом, но теперь я использую webpack 3 с Babel и несколько дополнительных загрузчиков (в зависимости от типа проекта I ' m работает). Я использую npm-скрипты для обработки моих задач верхнего уровня (запуск сервера разработки, создание готового дистрибутива, запуск тестов и т. Д.), Но я разрешаю webpack обрабатывать все дела пересылки ES6 в ES5, перевод стилей Sass, прекомпиляцию Vue компоненты и т. д. Это небольшая работа, чтобы обдумать подход к webpack, но это стоит того.

Возможно, веб-пакет не подходит вашему стилю - достаточно справедливо. Но есть ряд других инструментов, которые вы могли бы использовать вместо этого. Все они требуют немного времени, чтобы приспособиться к их подходам, но все они должны иметь возможность заботиться о разрешении модуля для ваших зависимостей. После правильной настройки среды сборки она перестает быть видимой частью рабочего процесса разработки; вы просто ссылаетесь на свои зависимые библиотеки по их именам, сопоставляете их с локальной локальной переменной и используете их.

Полезно?

EDIT: Это специфичный для webpack, но должны быть аналогичные варианты, доступные с другими связями или инструментами построения.

В webpack вы можете использовать плагин copy-webpack для копирования зависимостей npm-sourced в отдельную папку. Это может быть полезно для рабочего, например, где контекст выполнения немного отличается.