Symlinking реактивные модули с каналом npm для локальной разработки дают ошибку

Во время разработки моего модуля React npm я обозначил его npm link. После этого пакет правильно связан, а также появляется в приложении для потребителей node_modules.

Модуль предоставляет интерфейс для создания компонента React. Поскольку я использую React, jsx и es2015, я использую babel для перевода кода модуля на этапе предварительного опубликования с помощью npm prepublish hook.

Однако, когда я пытаюсь создать свое потребительское приложение с webpack (т.е. после его связывания), в моем пакете возникает ошибка:

Ошибка сборки модуля: Ошибка: не удалось найти предустановленный "es2015"

Теперь смешно, что если я опубликую пакет на npm, то npm install из реестра моего потребительского приложения, постройте его, все будет хорошо.

Я попытался установить babel-preset-es2015 в своем приложении для пользователей, но потом начинает жаловаться на то, что не нашел babel:

Модуль не найден: Ошибка: не удается разрешить модуль 'babel'

Опять же, если я устанавливаю его из реестра npm, все работает нормально, во время сборки не возникают ошибки.

Я также пробовал установить babel-core, babel-cli и babel-polyfill, все безрезультатно.

Я использую babel v6.1.x всюду и осведомлен о всех последних изменениях, однако, я думаю, что мне не хватает чего-то очевидного и я бы очень признателен, если кто-то может мне помочь, потому что постоянно публикую модуль, чтобы проверить, вещи - это просто плохая практика.

Для полноты здесь приведен код:

Ниже перечислены шаги, которые я выполняю, чтобы связать модуль:

cd ~/Sites/me/react-leafbox
npm link
cd ~/Sites/me/mapp
npm link react-leafbox
npm start

Трассировка стека после сборки:

ERROR in ../react-leafbox/lib/index.js
Module build failed: Error: Couldn't find preset "es2015"
    at OptionManager.mergePresets (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:329:17)
    at OptionManager.mergeOptions (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:12)
    at OptionManager.addConfig (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:223:10)
    at OptionManager.findConfigs (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:366:16)
    at OptionManager.init (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:410:12)
    at File.initOptions (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transpile (/Users/daniel/Sites/me/mapp/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (/Users/daniel/Sites/me/mapp/node_modules/babel-loader/index.js:83:14)
 @ ./src/js/components/App.jsx 2:10-34

Трассировка стека после добавления дополнительных зависимостей, связанных с Babel (которые, я считаю, не обязательно, потому что они доступны в модуле response-leafbox):

ERROR in ../react-leafbox/lib/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/daniel/Sites/me/react-leafbox/lib
 @ ../react-leafbox/lib/index.js 8:11-39

Я использую node v5.0.0 с npm v3.3.6 на MAC OSX El Capitan v10.11.1. Я также попытался использовать node v4.2.1 с npm 2.14.7, что дает мне те же ошибки.

Ответ 1

Я нашел решение своей проблемы. Я обнаружил это в webpack docs:

ВАЖНО: загрузчики здесь разрешены относительно ресурса к которым они применяются. Это означает, что они не разрешены относительными файл конфигурации. Если у вас установлены загрузчики с npm и ваша папка node_modules не находится в родительской папке всего источника файлы, webpack не может найти загрузчика. Вам нужно добавить node_modules как абсолютный путь к опции resolveLoader.root. (resolveLoader: {root: path.join(__ dirname, "node_modules" )})

После добавления опции root в webpack.config.js исчезла ошибка, связанная с невозможностью разрешения babel. Вместо этого я получил новый, который сказал, что он не может решить react. Я определил его как равную зависимость, что заставило меня подумать, что ему нужно отступить, когда он не может найти его локально, тогда я нашел это в docs:

resolve.fallback Каталог (или массив абсолютных путей каталогов), в котором webpack должен искать модули, которые не найдены в resolve.root или resolve.modulesDirectories.

Я объединил эти два параметра в webpack.config.js моего потребительского приложения, и он сработает!

// webpack.config.js
var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src/js/index.js'),

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "build.js"
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query:
                    {
                        presets:[ 'react', 'es2015' ]
                    }
            }
        ]
    },

    resolve: {
        extensions: [ '', '.js', '.jsx' ],
        fallback: path.join(__dirname, "node_modules")
    },


    resolveLoader: {
        root: path.join(__dirname, "node_modules")
    }
};

Я надеюсь, что это поможет любому, кто сталкивается с подобной проблемой.

Обновление для Webpack ^ 2.5.0

Удалите объект resolveLoader и замените resolve.fallback на resolve.symlinks на false:

resolve: {
    extensions: [ '', '.js', '.jsx' ],
    symlinks: false
}

Ответ 2

Возможно, это была просто орфографическая ошибка, но она должна быть babel-preset-es2015, а не babel-preset-2015. npm установить babel-preset-es2015.

Ответ 3

У меня была эта проблема, оказалось, что я установил глобально, когда мне нужно было установить ее в свой каталог приложений с помощью npm install webpack webpack-dev-server --save-dev

Ответ 4

У меня возникла эта проблема при попытке настроить демонстрацию маршрутизатора: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up

Все решения здесь не сработали для меня, но что было добавлением файла .babelrc с этим в качестве контента:

{ "пресеты": [ "Реагируют" ] }