2016-11-12 51 views
1

使用巴貝爾獲取ApolloClient到ES5 CommonJS的模塊格式

我試着用巴貝爾獲得阿波羅客戶端模塊在非作爲ES5工作瀏覽器,節點環境。我已經通過下面的步驟總是給我同樣的結果。我試圖找出這個結果是否適合節點環境。當我將babel處理過的文檔導入到我的項目中並調用應該導出的方法時,即時獲取,找不到模塊。對於上下文,該項目是fusetools.com演示。 Fusetools不支持ES2015承諾,所以這個想法是,使用babel es2015預設,它應該工作。我主要是爲了學習某些東西而追逐這一點,但如果我能夠實現這一目標,這將是一件好事。任何意見,以更容易的方式來做到這一點,現在我更瞭解它,將不勝感激。我使用代碼的項目可以在here找到。我使用轉換後的代碼的fusetools項目是here使用巴貝爾獲取ApolloClient到ES5 CommonJS的模塊格式爲節點環境

我得到的錯誤是:

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'); 

這是代碼即時試圖達到:

``` 
"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 
``` 

任何和所有的意見,我可以從讚賞學習。謝謝。

回答

1

一種方法是使用的WebPack這樣的:

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), 
    }), 
    ], 
}; 

然後在config目錄,你可以有:

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

export default ApolloClient; 

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

export default createNetworkInterface; 

另外,如果你還想要Redux:

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

export default Redux; 

但是我不能得到gql這樣做,並不得不使用bolav的fusepm。 你會用完全相同bolav有提到,全球第一安裝: npm install -G fusepm然後fusepm npm graphql-tag

一旦你擁有所有這些在地方,你可以要求他們如下:

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'); 

這樣還是沒能使用一些TLC但現在,它的工作原理,並得到的工作做好:

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)); 

此外,如果你喜歡我設置一個整體項目以及服務器,可能是有興趣的給你:fuseR

2

我製作了fusepm,它有一個模式可以將npm模塊轉換爲在FuseTools下運行它們。它仍然有很多錯誤的,但至少我設法要來的時間比你:

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

然後在你的JavaScript:

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

fusepm使用巴貝爾,一些自定義插件。要做到這一點