Symlinkowanie reaktywowania modułów za pomocą npm link dla lokalnego rozwoju daje błąd

Question

Podczas rozwoju mojego modułu Reactnpm, dowiązałem go z npm link. Po wykonaniu tej czynności pakiet zostanie poprawnie połączony, a także pojawi się w aplikacji konsumenckiej node_modules.

Moduł udostępnia interfejs umożliwiający utworzenie komponentu React. Ponieważ używam React, jsx i es2015, używam babel do transpozycji mojego kodu modułu na etapie wstępnego publikowania, używając npm prepublish hook.

Jednak gdy próbuję zbudować Moje app konsumentów z webpack (czyli po połączeniu go) wystąpi błąd w moim pakiecie stwierdzając:

Module build failed: Error: Couldn't find preset "es2015"

Teraz zabawne jest to, że jeśli opublikuje pakiet na KMP , następnie npm install z rejestru w mojej aplikacji konsumenckiej, zbuduj go, wszystko działa poprawnie.

Próbowałem instalacji babel-preset-es2015 w mojej aplikacji konsumenckich, ale potem zaczyna narzekać nie znalezienie babel:

Module not found: Error: Cannot resolve module 'babel'

Ponownie, jeśli mogę zainstalować go z rejestru npm wszystko działa poprawnie, bez błędów są wyrzucane podczas budować.

Próbowałem również zainstalować babel-core, babel-cli i babel-polyfill, wszystko bez skutku.

Używam babel v6.1.x wszędzie i świadomy wszystkich ostatnich zmian, jednak myślę, że jestem brakuje czegoś oczywistego i naprawdę doceniam to, czy ktoś może mi pomóc, bo ciągle publikowanie modułu w celu sprawdzenia, czy rzeczy prace to tylko zła praktyka.

kompletności sake Oto kod:

• module
• consumer app

Są to kroki mogę wykonać, aby połączyć moduł:

1. cd ~/Sites/me/react-leafbox
2. npm link
3. cd ~/Sites/me/mapp
4. npm link react-leafbox
5. npm start

Ślad stosu po budynku:

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 

Ślad stosu po dodaniu dodatkowych babel związane zależnościami (które wierzę should't być konieczne, ponieważ są one dostępne w module-module-Rejestru):

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 

Używam node v5.0.0 z npm v3.3.6 na MAC OSX El Capitan v10.11.1. Próbowałem również używać node v4.2.1 z npm 2.14.7, co daje mi te same błędy.

Answer 1

Znalazłem rozwiązanie mojego problemu. Odkryłem to w WebPacka docs:

IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. This means they are not resolved relative the the configuration file. If you have loaders installed from npm and your node_modules folder is not in a parent folder of all source files, webpack cannot find the loader. You need to add the node_modules folder as absolute path to the resolveLoader.root option. (resolveLoader: { root: path.join(__dirname, "node_modules") })

Po dodaniu opcji root do webpack.config.js błąd o nie jest w stanie rozwiązać babel zniknął. Zamiast tego dostałem nowego, mówiącego, że nie może rozwiązać problemu react. Mam go zdefiniować jako uzależnienie rówieśniczej, która uświadomiła mi, że to musi awaryjnej, gdy nie można znaleźć go lokalnie, a potem znalazłem to w docs:

resolve.fallback A directory (or array of directories absolute paths), in which webpack should look for modules that weren’t found in resolve.root or resolve.modulesDirectories.

ja łączyć te dwie opcje w webpack.config.js z moja aplikacja konsumencka i zadziałało!

// 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") 
    } 
}; 

Mam nadzieję, że pomoże to każdemu, kto spotka się z podobnym problemem.

Aktualizacja dla pakietu sieciowego^2.5.0

Zdjąć resolveLoader obiekt i zastąpić resolve.fallback z resolve.symlinks zestaw do false:

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

Answer 2

Może to był tylko błąd ortograficzny, ale powinien to być babel-preset-es2015, a nie babel-preset-2015. npm install babel-preset-es2015.

Answer 3

miałem ten problem, okazuje się, miałem zainstalowane globalnie kiedy potrzebne do zainstalowania go do mojego app dir z npm install webpack webpack-dev-server --save-dev

Answer 4

miałem ten problem, gdy próbuje ustawić demo Router: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up

Al l tu rozwiązania nie działa dla mnie, ale to, co zrobił było dodanie pliku .babelrc z tego jako treści:

{ „presety”: [ „reagują” ] }