使用Babel将ApolloClient转换为节点环境的ES5 CommonJS模块格式
使用Babel将ApolloClient转换为ES5 CommonJS模块格式
我试图使用Babel来让apollo-client模块在非浏览器节点环境中作为ES5工作。 我已经经历了下面的步骤总是给我相同的结果。 我试图找出这个结果是否是一个节点环境的正确结果。 当我将babel处理的文件导入到我的项目中并调用应该导出的方法时，即时获取，找不到模块。 对于上下文，该项目是一个fusetools.com演示。 保险丝不支持ES2015承诺，所以这个想法是，与巴贝尔es2015预设，它应该工作。 我主要是为了学习某些东西而追求这个目标，但如果能够实现这个目标，这将是一件好事。 任何意见，以更容易的方式来做到这一点，现在我了解得更好，将不胜感激。 我在这里find了代码的项目。 fusetools项目，我使用转换的代码在这里 。
我得到的错误是：
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 ```
任何和所有的评论，我可以学习赞赏。 谢谢。
一种方法是使用这样的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
我做了fusepm ，它有一个模式来转换npm模块在FuseTools下运行它们。 它仍然有很多的错误，但至less我设法来比你长：
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使用Babel和一些自定义插件。