My static website built using Gatsby utilizes a number of node_modules that use es6. From what I understand, I am facing the issue that is talked about in this link https://github.com/gatsbyjs/gatsby/issues/3780 where my gatsby build fails because uglify is not able to handle es6, and the babel presets built into gatsby do not transpile the node_modules. My initial thought was to edit the babel presets to include the node_modules, but I got a bunch of new errors on gatsby build that looked like this Module build failed: Error: Couldn't find preset. What other solutions can I try?
After trying a number of different solutions, I ended up copying the offending node packages locally and requiring the local versions instead of the node_modules version. This way I could transpile them myself to es5. This is a temporary solution until my team can move to using Gatsby 2 which will fix this problem in the future.
Related
I'm a newbie in Angular. I came across the files tsconfig.app.json, tsconfig.spec.json when angular app was installed using Angular-CLI and found the following point useful from this link.
Both tsconfig.*.json files are for TypeScript configuration.
tsconfig.app.json is used for compiling the code, while
tsconfig.spec.json for compiling the tests.
My doubt is, can we completely exclude tsconfig.spec.json file if we are not using any test environment? Or is tsconfig.spec.json mandatory?
If you don't use tests, feel free to remove tsconfig.spec.json.
Actually you can generate a new angular app without setting up test environment (karma, protractor and *.spec.ts files)
for #angular/cli version 7,8,9 the command is:
ng new --minimal=true --skipTests=true your-app-name
for #angular/cli version 6:
ng new --minimal --skip-tests your-app-name
This will remove unnecessary complexity from configuration files which is a nice thing if you just started learning angular.
Yes use when create your component or service using ng g c --skipTests=true
I am trying to use components from http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO question. But for except this sample I wasn't successful.
Usually I get errors like "require/import/module is not defined" or "Youtube is undefined" (by having (def yt-test [] (r/adapt-react-class js/Youtube)). I am confused about what is needed to do. I read something about webpack/browserify, saw cljsjs packages - are those required in order to make this working?
I wrote a step by step guide on how to achieve this with webpack:
blob.tomerweller.com/reagent-import-react-components-from-npm
The general concept is the same as #scttnlsn suggested: bundle all npm packages in an external JS file and expose them through the global window object.
Those components are packaged as CommonJS modules. One approach for accessing CommonJS modules from ClojureScript is to bundle them into a single JavaScript file that can be included with your ClojureScript build.
You'll need to create a JavaScript entry point file which requires your various NPM dependencies and exposes them to ClojureScript (for example, by setting them on window). Create a file (let's call it index.js) containing:
window.YouTube = require('react-youtube');
Then use a tool like Browserify to bundle your entry point file and all of the dependencies it requires:
npm install -g browserify
browserify index.js --standalone window > bundle.js
Include bundle.js in your ClojureScript build and you'll be able to access the React component from ClojureScript via js/YouTube
I'm basically trying to figure out what I need to do, to make an MVC project (created in Visual Studio 2013) to behave like a fresh MVC project created directly in Visual Studio 2015.
What I've noticed is that I see more interesting things in Visual Studio 2015 with a newly created project, and I'm sure some of these would be useful, but I can't figure out the magic to get them enabled. I've tried doing some googling but unfortunately keep finding tutorials for VS2013 support which isn't what I'm after, I specifically want to leverage the new VS2015 features. Things that I've spotted so far:
Dependencies
How do I enable the dependency view? I've tried copying a bower.json file from a new project, but even after a restart in VS2015 I don't get this dependencies tracker.
Task Runner
How do I enable the task runner? I tried creating a Gulpfile.js but I get an error in the output window gulp is not recognized as an internal or external command. I don't get this in a brand new solution, but it reads as though gulp isn't installed on my machine?
How do I enable the dependency view?
This isn't possible; the Dependencies node is part of the DNX project system and is only available in new projects.
How do I enable the task runner?
In addition to adding the gulpfile, you must add a package.json file, and add "gulp" to its devDependencies section. Other tools you'll be using in Gulp should be added here as well. You can use a new ASP.NET 5 project as an example.
You may want to add a bower.json file as well. Bower components will be downloaded to a bower_components folder, which will be hidden by default in the old project system. Adding Bower.json from the New Item template will also add a .bowerrc file that moves the package download location to wwwroot/lib. Probably not what you want for the MVC project; you could change this to just lib instead, or delete the .bowerrc. While the hidden bower_components folder is harder to work with, it's omitted from checkin in git, which is probably what you want.
My project is ES6 (webpack + babel). Plato is great, but doesn't work with ES6 yet. I took a look at escomplex and the series of related packages, but it looks like the author is no longer maintaining this and it seems like it doesn't support ES6 anyways.
I'm using the ESLint complexity rule to at least warn me if there's an issue (it's set to warn at 6), but it's not the same as a pretty report.
Any suggestions?
There is a fork created by deedubs that uses espree instead esprima. I've installed it and it runs on ES6 styled code like a charm, in order to install the fork version instead the default distro execute the following command:
npm install -g git+https://github.com/deedubs/es6-plato.git
Whenever you want to uninstall it just do it like you would do it with vanilla plato install by writing
npm uninstall plato
Here's a screenshot for a file report based on a ES6 code after installing the Plato forked version
It's been about 3 weeks since you asked the question so I am not sure if this will be still useful for you but I hope it can help others with the same problem we were facing on using this amazing tool.
I published a version of plato that does this here: https://www.npmjs.com/package/es6-plato
updates lodash and dependencies
fixes some common bugs in plato
properly parses es6
this includes classes
npm install --save es6-plato
read the docs to use it with gulp, or via the js api.
I am currently creating a portable consolidation of my workflow using Node-Webkit which has node.js embedded. Now my problem is getting grunt/gulp inside the project itself as it depends on the cli somewhat(avoidable, granted), and also is confusing to me on the architecture. Is it possible to find just a .js with grunt in it to include much like Jquery/Handlebars?
Is this all I need to just include and run?
No before that make sure you environment is up, get the package.json, GruntFile.js file. In GruntFile.js you can specify what you want to pre-process. For example jade,Less,coffee. It looks very much like a node function, for sample you can refer to link
Now to make this work you also need to install various contrib plugins as per your requirement. Then register every single task in GruntFile.js. It really speeds up the development.
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('test', ['jade', 'less','coffee']);
So to process less,jade,coffee, we need to run the module installations such as
npm install grunt --save-dev
npm install grunt <module name> --save-dev
There are many more interesting configurations to learn and documentation is really nice, please refer to getting started guide
This adds the required Grunt and grunt plugins to package.json