I have a fjs 3.0 project that I just coming back to after a few months. In the meantime it seems several modules have been archived and "moved into the main feathersjs module". So I'm a bit confused. How do I clean up my package.json and app.js to reflect this? I deleted /errors, /configuration, /socketio and /express from my package.json now what has to change in app.js as without these I get missing module errors? I generated a new app with 3.8.0 cli just to see what was in app.js and it's the same. So I am confused about this whole "archive" situation.
const express = require('#feathersjs/express')
const configuration = require('#feathersjs/configuration')
const rest = require('#feathersjs/express/rest')
const socketio = require('#feathersjs/socketio')
This is a purely organizational change and does not affect how you use Feathers in any way.
Many other projects like Babel, React and Meteor are already using this "Monorepo" style of managing multiple packages. You can find the issue related to this at feathersjs/feathers#462
Related
I have a react application created using "create react app rewired". I've installed ts-jest and want to be able to customize Jest. I read the documentation from ts-jest and executed npx ts-jest config:init at the root level of my project to create the initial configuration file. To test that jest is indeed using that configuration file, I wrote the following line console.log(window); in a sample test file and modified the configuration such that testEnvironment is set to "node".
I am expecting the test to fail due to window being undefined, but I am getting the window object back. I tried renaming the file to jest.config.ts and I got the same result.
I did a global search across all the files to see if there's another configuration file somewhere that is overriding my configurations, but there was none found.
What am I doing wrong? I know jest comes pre-packaged with create-react-app (CRA). I would imagine that create-react-app-rewired would only include some wrapper above CRA so where is it getting its configurations from?
I've come to realize that create-react-app-rewired package had nothing to do with this issue since it is simply a wrapper package that exposes a configure-overrides.js file to allow developers to modify the webpack configurations managed by create-react-app.
The jest.config.ts or jest.config.js config file I created had no effect because create react app (CRA) will generate and use its own jest config file underneath the hood.
I discovered this by happenstance while researching on another issue. A comment by dstapleton92 on GitHub helped me draw this conclusion.
Create React App supports overriding SOME of the values via the "jest" property in package.json file. Upon inspecting the jest config factory function in CRA, testEnvironment property is hard coded to "jsdom" and the key is not exposed as part of the list of overridable properties.
This is why the attempts I made were not successful.
I am using JsStore with angular 6 and I am getting this error when try to import it with file-loader
" import * as workerPath from 'file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.js' ".
It show cannot find module 'file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.js'.
Adding the extra folder with worker.d.ts file doesn't help in angular library generated with the new 'ng generate library' because the library use roll-up instead of web-pack and doesnt has a file-loader. Could you suggest me another way to import jsstore.worker.js, please?
There are multiple approach to do it -
You can copy the jsstore script in a folder then supply the path of the worker to jsstore instance.
e.g -
var con = new JsStore.Instance(new Worker('path of the jsstore worker script'));
But it would be better if we can include the script directly into the code, so that webpack or any other module bundler can take care of everything. We need to find a way to do it.
Another approach would be to run jsstore without worker (i dont recommend it, as it is slower). Check out the example - https://github.com/ujjwalguptaofficial/JsStore/tree/master/examples/ts%20without%20worker
Hope this helps.
I would like to use the ECMAScript 6 module system in a front-end project, so that the interdependencies of the code were more clear than simply loading "all that might be needed" up front, in the HTML.
However, having the following line in the main JavaScript file does not work:
import fuzLogin from 'fuzLogin'
The error in the browser's console is: can't find variable: require
The compiled code (created by Babel) is:
var _fuzLogin = require("fuzLogin");
var _fuzLogin2 = _interopRequireDefault(_fuzLogin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Is ECMAScript 6 module system supposed to work, for compiled code, with WebStorm 10?
Should I maybe add some external dependency in my HTML, to provide the missing require?
Are there other ways I could reach a modular front-end orchestration of my JavaScript side?
I think that you're babel configuration is set up to use commonjs that transpiles with require (requirejs)... so, in order to work with that configuration you need to include requirejs: http://requirejs.org/
I found two ways that fulfil what I was looking for, in slightly different ways:
jspm
Rollup
JSPM allows on-the-fly loading of ES2015 modules, so that the transpiling happens in the browser. This is pretty awesome, really, and something I wasn't expecting.
In addition, JSPM also provides traditional build tools for doing the bundling for production.
But I actually chose to go with Rollup.
Rollup gathers all kinds of build systems together, and is based on ES2015 packaging, providing what I was after. Most important for me were the brilliant blog posts by Jason Lengstorf (just 1 and 2 weeks old, btw) that walk one through the whole practical setup.
References:
jspm-trial (GitHub) repo that I did, experimenting these things
Smaller, More Efficient JavaScript Bundling Using Rollup (blog, Aug 2016)
we started our project with ES6 javascript skeleton.
we would like to extract some styles and custom attributes to a common folder so we can use these at any Aurelia module we will build in the future.
the problem is with the bundle files. we don't know how to config them to bundle external folder out of the main ES6 folder.
can you please tell us what to do?
It sounds like you want to build an Aurelia plugin that you can import into any project. I would start by taking a look at the Aurelia plugin skeleton.
Once you've built your plugin with the custom styles and attributes you want, you'll want to either register it with jspm as a link, or publically through a registry such as npm or github.
Once published, you will be able to jspm install registry:my-package in any new project, and add the following line to your main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('my-package');
}
For more information on this last step, see the brilliant answer provided by Ashley Grant here.
I have a project for a websocket-based library that has components that need to run in both Node and the browser. Currently the library is organized and built as follows:
All the different components are written into their own es6 files.
The components that are used in the browser are transpiled into es5 files (using babel)
The transpiled files are then aggregated into one file (using webpack and the babel loader)
How do I access the various classes defined in the components in the browser? (i.e. how do I get the equivalent of var Client = require("client"); to work?)
P.S. - I'm using Gulp to manage all of this, so answers that include gulp solutions are especially appreciated.
I hope, I got you right, but what you wanna do is basically to open your dev-tools in the browser and type client.myFunction(), right?
If so, you need to attach your library client to the global namespace or to the window object. This needs to happen in your main entry point file, where all your other submodules are imported.
Example (client.js)
import {myFunction} from './functions';
import {myConstant} from './constants';
const Client = {
myFunction, // or: myFunction: myFunction (if you do not use ES7)
myConstant
};
window.Client = Client; // or global.Client = Client;
Now you would include your script bundle in an HTML page via script-tag and should be able to call window.Client.myFunction(), i.e. Client.myFunction() in the browser or on your page.
Is that, what you were looking for? Let me know!