Situation
So I have a .babelrc like this:
{
"presets": [
"es2015",
"stage-2",
"react"
],
"plugins": [
"transform-decorators-legacy"
]
}
Question
What is the difference between presets and plugins? Which one should I use to configure Babel?
tl;dr
Presets are just a collection of plugins. You can include plugins individually in the plugins array, or collection of plugins in the presets array. If a plugin is part of a collection (preset), you don't have to include it individually in plugins.
The same goes for npm packages when you include them in package.json.
Presets vs Plugins
Babel has lots of official and third party plugins. Presets are collections of plugins or as they say:
Presets are sharable .babelrc configs or simply an array of babel plugins.
An important difference between the two is that plugins are loaded before presets.
Plugins of a preset
The most common presets are the official ones and the discontinued experimental presets.
Most of the official presets contain plugins to transpile features of the EcmaScript standards, while the experimental (stage-x) presets contained plugins that transpiled future experimental features whose standardization is still a work in progress. These experimental/proposal presets are deprecated since Babel 7. They have a blog entry on the reasons. Read the section below to see how they worked.
When you click on a preset, you can see which plugins (and maybe other presets) are included in it. If you include a plugin via a preset you don't have to include it individually. The same goes for package.json when you include the npm packages of the presets.
Deprecated proposal preset system
Going from stage 0 (just an idea) to stage 3 (candidate) you had collections of plugins that were more closer to getting standardized. Because of this, when you included a preset, every preset with a higher stage-x value were included too. The plugins contained in these presets were continuously varying in each version, since they are a work in progress, and there is a chance that plugins will be removed if they got rejected. That is why you needed transform-decorators-legacy because, decorator transpiling was earlier removed from Babel, although they added it back later.
Related
Migrated existing webpack project to use webpack 3.5.5 and its new config. Using express server instead of webpack-dev-server.
I had to setup the resolve in webpack as below.
const resolve = {
extensions : ['.js'],
modules : [
'node_modules',
'src',
'testApplication'
]
};
When i debug this webpack application using chrome developer tools I can see the 2 versions of source files.
The first one under webpack://
It is exactly matching with the source
The second one under webpack-internal://
This one is the babel compiled version of the source.
My questions are
Is there someway where I get only a first version of the file instead of both?
I thought node_modules should have been implicitly defined as a module rather than me specifying it explicitly in resolve, is there someway that I can make the build work without having the node_modules defined in resolve.
After using the same source code with webpack 3.5.5(migrated it from webpack 1.14.0) the express server start seems to have slowed node. My guess is that having specified the node_modules in modules under resolve has caused it. Any ideas?
You can configure the source maps using Webpack's devtool property. What you want is devtool: 'source-map'(source). This will only show you the original source code under webpack://. Note that there are other options that might be more appropriate for your use case.
["node_modules"] is in the default value for resolve.modules. However, if you specify resolve.modules you need to include "node_modules" in the array. (source).
It seems strange that you specify "src" and "testApplication" in resolve.modules. If you have local source files you should require them using relative paths e.g. require("./local_module"). This should work without having src in resolve.modules
Specifying node_modules in resolve.modules is not responsible for any slow down (see 2.). There are many possible reasons the slow down. E.g. maybe you are erroneously applying babel to the whole node_modules folder?
It seems to be resolved (or at least greatly improved) in Chrome 66.
In a bower.json file, what are the resolution and overrides properties used for?
{
"name": "name",
"dependencies": {
"angular": "~1.4.8",
...
"jquery": "2.2.4"
},
"overrides": {
"ionic": {
"main": [
"release/js/ionic.js",
"release/js/ionic-angular.js"
]
}
},
"resolutions": {
"angular-ui-router": "~0.2.15",
"angular": "~1.5.3"
}
}
Resolution
The resolution section appears when you need to resolve dependency versions (after bower install) when conflicts occur. It's for making a decision regarding which concrete version of a dependency to use when the need to resolve dependency conflicts arises - bower automatically injects this decision as the "resolution" record. So the next time a conflict occurs (when updating the dependency tree, etc), the resolved version will be based on the "resolution" data in your configuration file.
Overrides
Overrides section is used to override the file(s) references when pointing to dependent library.
Task runners in most cases use the bower configuration library metadata to inject links to these libraries into a page's content. When we want to inject a bootstrap link into a page, we do not need to go into the "bower_components" folder, find the package, and investigate the file content. We can use the component metadata to find the main, injectable file reference.
The "overrides" section is used to change this data to use another file, or even a set of files, as a package's main entry point.
Multiple Bower packages can list different versions of the same library as a dependency. The resolutions section specifies which version of the library to use whenever this type of situation occurs. If not specified in bower.json, you will receive a command line prompt upon running bower install.
The overrides section makes it possible to override default paths to assets installed through Bower when using a task runner like Gulp. If you intend to move files from their default location in the bower_components folder to accommodate your build process, for example, it could prove handy in this type of setup.
We use resolutions object in your bower.json file to specify the component name & version to automatically resolve the conflict when running bower commands.
Overrides section is used to override the file(s) references when pointing to dependent library.
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'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
It gave me this error:
Chrome 37.0.2019 (Mac OS X 10.9.3) ERROR
Uncaught ReferenceError: getJasmineRequireObj is not defined at /Users/Lucia/Desktop/test-yo-karma/dev/vendors/jasmine/src/core/Spec.js:1
But I made sure the file did exist. And couldn't find the error anywhere?
I found i had
frameworks: ['jasmine', 'jasmine-ajax'],
instead of
frameworks: ['jasmine-ajax', 'jasmine'],
in my karma.conf
Just spent a good 4 hours dealing with the same issue. There are several things going wrong here (hence all the different, probably equally accurate answers), the core of it being: there are version conflicts requiring specific dependencies for 'jasmine', 'jasmine-ajax', and 'karma-jasmine-ajax'.
I use Jasmine 1.3, and the current version of karma-jasmine-ajax depends on a version of jasmine-ajax that is incompatabile with Jasmine 1.3.x.
This is noted in the jasmine-ajax documentation, but not the karma-jasmine-ajax documentation: "This branch is now version 2.0, if you need jasmine-ajax for Jasmine 1.3.x please grab the last release from that tag."
In order to fix this specific conflict, I specified "karma-jasmine-ajax": "0.1.3", in my package.json, which pulls in jasmine-ajax version 2.0.0. This version of jasmine-ajax does not use getJasmineRequireObj.
If you're loading in jasmine-ajax directly, you can use this version: https://raw.github.com/pivotal/jasmine-ajax/v1.3.1/lib/mock-ajax.js
Keep in mind (yet another gotcha) that the different versions of jasmine differ in their usage of request.response and request.RespondWith -- and this switches back and forth between older and newer versions.
Hope this helps.
Originally I had this in karma.conf.js:
files: [
{pattern: 'dev/vendors/**/*.js', included: false},
{pattern: 'dev/scripts/**/*.js', included: false},
{pattern: 'test/**/*Spec.js', included: false},
'test/test-main.js'
]
It turns out,
the order of files included matters
you're not supposed to include irrelevant files (e.g. the whole of /vendors)
So I should include separate files, in their order of dependency instead.
[The unhelpful documentation]
i saw this error as well, and when i looked through it, it turned out that var TEST_REGEXP in karma.conf.js was too broadly defined and was actually grabbing and executing: my_client/app/bower_components/jasmine/src/core/Spec.js:1
once i changed my TEST_REGEXP to include only my specs (you could also do this by specifically excluding all spec files of vendor directories) the error went away.