2016-11-12 2 views
1

Mit Babel Get ApolloClient zu ES5 Commonjs Modul Format

Im Versuch Babel zu nutzen, um den apollo-Client-Modul Get in einem nicht als ES5 zu arbeiten Browser, Knotenumgebung. Ich bin Schritt für Schritt durchgegangen, die mir immer das gleiche Ergebnis geben. Ich versuche herauszufinden, ob das Ergebnis für eine Knotenumgebung richtig ist. Wenn ich die babel verarbeiteten Dokumente in mein Projekt importiere und eine Methode aufrufen, die exportiert werden soll, kann ich das Modul nicht finden. Für den Kontext ist das Projekt eine fustetools.com-Demo. Fusetools unterstützt ES2015 Promises nicht, also ist die Idee, dass es mit dem babel es2015 Preset funktionieren sollte. Ich jage das meistens nach unten, um etwas zu lernen, aber es wäre großartig, wenn ich es zur Arbeit bringen könnte. Alle Kommentare zu einem einfacheren Weg, dies zu tun, jetzt, wo ich es besser verstehe, würden sehr geschätzt werden. Das Projekt, in dem ich den Code babded, kann here gefunden werden. Das Projekt fusetools, in dem ich den transformierten Code verwendet habe, lautet here.Babel Mit ApolloClient bis ES5 Commonjs Modul Format für Knoten Umwelt

Der Fehler, den ich bekommen ist:

LOG: Error: JavaScript error in MainView.ux line 9: Name: Fuse.Scripting.Error 
Error message: require(): module not found: js/apollo-client/ApolloClient.js 
File name: MainView.ux 
Line number: 9 
Source line:  var ApolloClient = require('js/apollo-client/ApolloClient.js'); 

Dies ist der Code im zu erreichen versuchen:

``` 
"use strict"; 

var networkInterface_1 = require('./transport/networkInterface'); 
var isUndefined = require('lodash.isundefined'); 
var assign = require('lodash.assign'); 
var isString = require('lodash.isstring'); 
var store_1 = require('./store'); 
var QueryManager_1 = require('./core/QueryManager'); 
var storeUtils_1 = require('./data/storeUtils'); 
var fragments_1 = require('./fragments'); 
var getFromAST_1 = require('./queries/getFromAST'); 
var DEFAULT_REDUX_ROOT_KEY = 'apollo'; 
function defaultReduxRootSelector(state) { 
    return state[DEFAULT_REDUX_ROOT_KEY]; 
} 
var ApolloClient = function() { 
    function ApolloClient(_a) { 
     var _this = this; 
     var _b = _a === void 0 ? {} : _a, 
      networkInterface = _b.networkInterface, 
      reduxRootKey = _b.reduxRootKey, 
      reduxRootSelector = _b.reduxRootSelector, 
      initialState = _b.initialState, 
      dataIdFromObject = _b.dataIdFromObject, 
      resultTransformer = _b.resultTransformer, 
      resultComparator = _b.resultComparator, 
      _c = _b.ssrMode, 
      ssrMode = _c === void 0 ? false : _c, 
      _d = _b.ssrForceFetchDelay, 
      ssrForceFetchDelay = _d === void 0 ? 0 : _d, 
      _e = _b.mutationBehaviorReducers, 
      mutationBehaviorReducers = _e === void 0 ? {} : _e, 
      _f = _b.addTypename, 
      addTypename = _f === void 0 ? true : _f, 
      queryTransformer = _b.queryTransformer; 
     this.middleware = function() { 
      return function (store) { 
       _this.setStore(store); 
       return function (next) { 
        return function (action) { 
         var returnValue = next(action); 
         _this.queryManager.broadcastNewStore(store.getState()); 
         return returnValue; 
        }; 
       }; 
      }; 
     }; 
     if (reduxRootKey && reduxRootSelector) { 
      throw new Error('Both "reduxRootKey" and "reduxRootSelector" are configured, but only one of two is allowed.'); 
     } 
     if (reduxRootKey) { 
      console.warn('"reduxRootKey" option is deprecated and might be removed in the upcoming versions, ' + 'please use the "reduxRootSelector" instead.'); 
      this.reduxRootKey = reduxRootKey; 
     } 
     if (queryTransformer) { 
      throw new Error('queryTransformer option no longer supported in Apollo Client 0.5. ' + 'Instead, there is a new "addTypename" option, which is on by default.'); 
     } 
     if (!reduxRootSelector && reduxRootKey) { 
      this.reduxRootSelector = function (state) { 
       return state[reduxRootKey]; 
      }; 
     } else if (isString(reduxRootSelector)) { 
      this.reduxRootKey = reduxRootSelector; 
      this.reduxRootSelector = function (state) { 
       return state[reduxRootSelector]; 
      }; 
     } else if (typeof reduxRootSelector === 'function') { 
      this.reduxRootSelector = reduxRootSelector; 
     } else { 
      this.reduxRootSelector = null; 
     } 
     this.initialState = initialState ? initialState : {}; 
     this.networkInterface = networkInterface ? networkInterface : networkInterface_1.createNetworkInterface({ uri: '/graphql' }); 
     this.addTypename = addTypename; 
     this.resultTransformer = resultTransformer; 
     this.resultComparator = resultComparator; 
     this.shouldForceFetch = !(ssrMode || ssrForceFetchDelay > 0); 
     this.dataId = dataIdFromObject; 
     this.fieldWithArgs = storeUtils_1.storeKeyNameFromFieldNameAndArgs; 
     if (ssrForceFetchDelay) { 
      setTimeout(function() { 
       return _this.shouldForceFetch = true; 
      }, ssrForceFetchDelay); 
     } 
     this.reducerConfig = { 
      dataIdFromObject: dataIdFromObject, 
      mutationBehaviorReducers: mutationBehaviorReducers 
     }; 
     this.watchQuery = this.watchQuery.bind(this); 
     this.query = this.query.bind(this); 
     this.mutate = this.mutate.bind(this); 
     this.setStore = this.setStore.bind(this); 
     this.resetStore = this.resetStore.bind(this); 
    } 
    ApolloClient.prototype.watchQuery = function (options) { 
     this.initStore(); 
     if (!this.shouldForceFetch && options.forceFetch) { 
      options = assign({}, options, { 
       forceFetch: false 
      }); 
     } 
     fragments_1.createFragment(options.query); 
     var fullDocument = getFromAST_1.addFragmentsToDocument(options.query, options.fragments); 
     var realOptions = Object.assign({}, options, { 
      query: fullDocument 
     }); 
     delete realOptions.fragments; 
     return this.queryManager.watchQuery(realOptions); 
    }; 
    ; 
    ApolloClient.prototype.query = function (options) { 
     this.initStore(); 
     if (!this.shouldForceFetch && options.forceFetch) { 
      options = assign({}, options, { 
       forceFetch: false 
      }); 
     } 
     fragments_1.createFragment(options.query); 
     var fullDocument = getFromAST_1.addFragmentsToDocument(options.query, options.fragments); 
     var realOptions = Object.assign({}, options, { 
      query: fullDocument 
     }); 
     delete realOptions.fragments; 
     return this.queryManager.query(realOptions); 
    }; 
    ; 
    ApolloClient.prototype.mutate = function (options) { 
     this.initStore(); 
     var fullDocument = getFromAST_1.addFragmentsToDocument(options.mutation, options.fragments); 
     var realOptions = Object.assign({}, options, { 
      mutation: fullDocument 
     }); 
     delete realOptions.fragments; 
     return this.queryManager.mutate(realOptions); 
    }; 
    ; 
    ApolloClient.prototype.subscribe = function (options) { 
     this.initStore(); 
     var fullDocument = getFromAST_1.addFragmentsToDocument(options.query, options.fragments); 
     var realOptions = Object.assign({}, options, { 
      document: fullDocument 
     }); 
     delete realOptions.fragments; 
     delete realOptions.query; 
     return this.queryManager.startGraphQLSubscription(realOptions); 
    }; 
    ApolloClient.prototype.reducer = function() { 
     return store_1.createApolloReducer(this.reducerConfig); 
    }; 
    ApolloClient.prototype.initStore = function() { 
     if (this.store) { 
      return; 
     } 
     if (this.reduxRootSelector) { 
      throw new Error('Cannot initialize the store because "reduxRootSelector" or "reduxRootKey" is provided. ' + 'They should only be used when the store is created outside of the client. ' + 'This may lead to unexpected results when querying the store internally. ' + "Please remove that option from ApolloClient constructor."); 
     } 
     this.setStore(store_1.createApolloStore({ 
      reduxRootKey: DEFAULT_REDUX_ROOT_KEY, 
      initialState: this.initialState, 
      config: this.reducerConfig 
     })); 
     this.reduxRootKey = DEFAULT_REDUX_ROOT_KEY; 
    }; 
    ; 
    ApolloClient.prototype.resetStore = function() { 
     this.queryManager.resetStore(); 
    }; 
    ; 
    ApolloClient.prototype.setStore = function (store) { 
     var reduxRootSelector; 
     if (this.reduxRootSelector) { 
      reduxRootSelector = this.reduxRootSelector; 
     } else { 
      reduxRootSelector = defaultReduxRootSelector; 
      this.reduxRootKey = DEFAULT_REDUX_ROOT_KEY; 
     } 
     if (isUndefined(reduxRootSelector(store.getState()))) { 
      throw new Error('Existing store does not use apolloReducer. Please make sure the store ' + 'is properly configured and "reduxRootSelector" is correctly specified.'); 
     } 
     this.store = store; 
     this.queryManager = new QueryManager_1.QueryManager({ 
      networkInterface: this.networkInterface, 
      reduxRootSelector: reduxRootSelector, 
      store: store, 
      addTypename: this.addTypename, 
      resultTransformer: this.resultTransformer, 
      resultComparator: this.resultComparator, 
      reducerConfig: this.reducerConfig 
     }); 
    }; 
    ; 
    return ApolloClient; 
}(); 
Object.defineProperty(exports, "__esModule", { value: true }); 
exports.default = ApolloClient; 
//# sourceMappingURL=ApolloClient.js.map 
``` 

Irgendwelche und alle Kommentare, ich könnte etwas lernen werden geschätzt. Vielen Dank.

Antwort

1

Eine Möglichkeit, dies zu tun, wäre webpack wie folgt zu verwenden:

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
    // watch: true, 
    entry: { 
    ApolloClient: './config/ApolloClient.js', 
    createNetworkInterface: './config/createNetworkInterface.js', 
    Redux: './config/Redux.js', 
    }, 
    output: { 
    path: path.join(__dirname, 'build/Libs'), 
    filename: '[name].js', 
    library: '[name]', 
    libraryTarget: 'commonjs', 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/, 
     exclude: /node_modules/, 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 
    }), 
    ], 
}; 

dann in config Verzeichnis könnten Sie haben:

/* ApolloClient.js */ 
import { ApolloClient } from 'apollo-client'; 

export default ApolloClient; 

und

/* createNetworkInterface.js */ 
import { createNetworkInterface } from 'apollo-client/transport/networkInterface'; 

export default createNetworkInterface; 

plus, wenn Sie will auch Redux haben:

/* Redux.js */ 
import * as Redux from 'redux'; 

export default Redux; 

Allerdings konnte ich gql auf diese Weise nicht erreichen und musste bolavs fusepm verwenden. Welche würden Sie genau verwenden, wie bolav erwähnt hat, zunächst global installieren: npm install -G fusepm und dann fusepm npm graphql-tag

Wenn Sie alle diese an Ort und Stelle haben, können Sie sie wie folgt erfordern:

var Redux = require('build/Libs/Redux'); 
var ApolloClient = require('build/Libs/ApolloClient'); 
var createNetworkInterface = require('build/Libs/createNetworkInterface'); 
var gql = require('fusejs_lib/graphql-tag_graphql-tag.umd'); 

Auf diese Weise konnte noch some TLC verwenden, aber für jetzt, es funktioniert und erhalten ist die Arbeit getan:

var networkInterface = createNetworkInterface.createNetworkInterface({ 
    uri: 'http://localhost:8000/graphql', 
}); 

var client = new ApolloClient.ApolloClient({ 
    networkInterface, 
}); 

client.query({ 
    query: gql` 
    query { 
     allPosts { 
     edges { 
      node { 
      id 
      headline 
      summary(length: 80) 
      body 
      createdAt 
      updatedAt 
      personByAuthorId { 
       firstName 
       lastName 
      } 
      } 
     } 
     } 
    } 
    `, 
}) 
.then(data => data.data.allPosts.edges.forEach(node => pages.add(createPage(node)))) 
.catch(error => console.log(error)); 

auch wenn man so will ich ein Setup habe ein ganzes Projekt zusammen mit Server, der von Interesse sein könnte zu Ihnen: fuseR

2

Ich machte fusepm, die einen Modus hat, um npm-Module zu konvertieren, um sie unter FuseTools auszuführen. Es ist immer noch eine Menge Bugs, aber zumindest habe ich es geschafft mehr zu kommen, als Sie:

fuse create app apolloc 
cd apolloc 
npm install apollo-client 
fusepm npm apollo-client 

Und dann in Ihrem javascript:

<JavaScript> 
    var ApolloClient = require('fusejs_lib/apollo-client.js'); 
</JavaScript> 

fusepm verwendet Babel, mit einige benutzerdefinierte Plug-Ins.

Verwandte Themen