I am trying to override the dependencies for one of the packages I am including in a polymer component, and can't seem to get it to work.
bower.json file looks like this:
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"paper-material": "PolymerElements/paper-material#^1.0.0",
"paper-toolbar" : "PolymerElements/paper-toolbar#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0"
},
"overrides": {
"paper-styles": {
"dependencies": {
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"font-roboto": "PolymerElements/font-roboto-local#^1.0.1",
"polymer": "Polymer/polymer#^1.0.0"
}
}
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"web-component-tester": "*"
}
basically I am trying to replace the font-roboto package with the font-roboto-local package. Can anyone see what I am doing wrong here? Unless I am interpreting the documentation incorrectly, this should work.
Bower uses a flat dependency tree; so you don't need to change the dependencies of paper-styles via overrides, you can do it directly in your bower.json:
"dependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"font-roboto": "PolymerElements/font-roboto-local#^1.0.0"
}
Edit: At first this worked for me, but then bower suddenly switch back to using font-roboto. This seems to be because paper-styles requires ^1.0.1, but font-roboto-local is only available in 1.0.0. This means that for bower satisfying the version is more important than which package to install.
I could fix this by setting the version to 1.0.0 without ^:
"dependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"font-roboto": "PolymerElements/font-roboto-local#1.0.0"
},
"resolutions": {
"font-roboto": "1.0.0"
}
The disadvantage is that you manually have to update the version now, but at least it works.
Related
I'm using function form of "use strict" and don't want global form which Babel adds after transpilation. The problem is I'm using some libraries that aren't using "use strict" mode and it might throw error after scripts are concatenated
As it has already been mentioned for Babel 6, it's the transform-es2015-modules-commonjs preset which adds strict mode.
In case you want to use the whole es2015 preset without module transformations, put this in your .babelrc file:
{
"presets": [
["es2015", { "modules": false }]
]
}
This will disable modules and strict mode, while keeping all other es2015 transformations enabled.
Babel 5
You'd blacklist "useStrict". For instance here's an example in a Gruntfile:
babel: {
options: {
blacklist: ["useStrict"],
// ...
},
// ...
}
Babel 6
Since Babel 6 is fully opt-in for plugins now, instead of blacklisting useStrict, you just don't include the strict-mode plugin. If you're using a preset that includes it, I think you'll have to create your own that includes all the others, but not that one.
There's now a babel plugin that you can add to your config that will remove strict mode: babel-plugin-transform-remove-strict-mode. It's a little ugly in that the "use strict" gets added and then removed, but it makes the config much nicer.
Docs are in the GitHub repo:
https://github.com/genify/babel-plugin-transform-remove-strict-mode
Your .babelrc ends up looking like this:
{
"presets": ["env"],
"plugins": ["transform-remove-strict-mode"]
}
I also came accross this rather ridiculous limitation that you cannot disable or overwrite settings from an existing preset, and have resorted to using this preset instead: https://www.npmjs.com/package/babel-preset-es2015-without-strict
plugins: [
[
require("#babel/plugin-transform-modules-commonjs"),
{
strictMode: false
}
],
]
You can tell babel that your code is a script with:
sourceType: "script"
in your babel config file. This will not add use strict. See sourceType option docs
Source: https://github.com/babel/babel/issues/7910#issuecomment-388517631
Babel 6 + es2015
We can disabled babel-plugin-transform-es2015-modules-commonjs to require babel-plugin-transform-strict-mode.
So comment the following code in node_modules/babel-plugin-transform-es2015-modules-commonjs/lib/index.js at 151 line
//inherits: require("babel-plugin-transform-strict-mode"),
just change .babelrc solution
if you don't want to change any npm modules, you can use .babelrc ignore like this
{
"presets": ["es2015"],
"ignore": [
"./src/js/directive/datePicker.js"
]
}
ignore that file, it works for me!
the ignored file that can't use 'use strict' is old code, and do not need to use babel to transform it!
Personally, I use the gulp-iife plugin and I wrap IIFEs around all my files. I noticed that the babel plugin (using preset es2015) adds a global "use strict" as well. I run my post babel code through the iife stream plugin again so it nullifies what babel did.
gulp.task("build-js-source-dev", function () {
return gulp.src(jsSourceGlob)
.pipe(iife())
.pipe(plumber())
.pipe(babel({ presets: ["es2015"] }))// compile ES6 to ES5
.pipe(plumber.stop())
.pipe(iife()) // because babel preset "es2015" adds a global "use strict"; which we dont want
.pipe(concat(jsDistFile)) // concat to single file
.pipe(gulp.dest("public_dist"))
});
This is not grammatically correct, but will basically work for both Babel 5 and 6 without having to install a module that removes another module.
code.replace(/^"use strict";$/, '')
Since babel 6 you can install firstly babel-cli (if you want to use Babel from the CLI ) or babel-core (to use the Node API). This package does not include modules.
npm install --global babel-cli
# or
npm install --save-dev babel-core
Then install modules that you need. So do not install module for 'strict mode' in your case.
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
And add installed modules in .babelrc file like this:
{
"plugins": ["transform-es2015-arrow-functions"]
}
See details here: https://babeljs.io/blog/2015/10/31/setting-up-babel-6
For babel 6 instead of monkey patching the preset and/or forking it and publishing it, you can also just wrap the original plugin and set the strict option to false.
Something along those lines should do the trick:
const es2015preset = require('babel-preset-es2015');
const commonjsPlugin = require('babel-plugin-transform-es2015-modules-commonjs');
es2015preset.plugins.forEach(function(plugin) {
if (plugin.length && plugin[0] === commonjsPlugin) {
plugin[1].strict = false;
}
});
module.exports = es2015preset;
Please use "es2015-without-strict" instead of "es2015". Don't forget you need to have package "babel-preset-es2015-without-strict" installed. I know it's not expected default behavior of Babel, please take into account the project is not mature yet.
I just made a script that runs in the Node and removes "use strict"; in the selected file.
file: script.js:
let fs = require('fs');
let file = 'custom/path/index.js';
let data = fs.readFileSync(file, 'utf8');
let regex = new RegExp('"use\\s+strict";');
if (data.match(regex)){
let data2 = data.replace(regex, '');
fs.writeFileSync(file, data2);
console.log('use strict mode removed ...');
}
else {
console.log('use strict mode is missing .');
}
node ./script.js
if you are using https://babeljs.io/repl (v7.8.6 as of this writing), you can remove "use strict"; by selecting Source Type -> Module.
Using plugins or disabling modules and strict mode as suggested in the #rcode's answer didn't work for me.
But, changing the target from es2015|es6 to es5 in tsconfig.json file as suggested by #andrefarzart in this GitHub answer fixed the issue.
// tsconfig.json file
{
// ...
"compilerOptions": {
// ...
"target": "es5", // instead of "es2015"
}
#angular/cli#7+ allows a customWebpackConfig to be specified to provide custom webpack configuration, such as:
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./build/custom-webpack.config.js",
"mergeStrategies": {
"externals": "prepend"
}
},
...
This file then technically allows you to prepend, append or replace any portion of the webpack configuration. Prior to upgrading to #angular#7.1.3 and #angular/cli#7.1.3 we had ejected the webpack configuration to make some additions. One such addition was the postcss-momentum-scrolling postcss-loader plugin that automatically enabled iOS momentum scrolling on all scrollable containers.
I am seeking support on figuring out how to generate the necessary custom webpack code to load this plugin via the supported customizations allowed by #angular/cli#7+.
Here is a sample of what I have tried in my custom-webpack.config.js file:
const postcssMomentumScrolling = require('postcss-momentum-scrolling');
module.exports = {
module: {
rules: [
{
test: /\.scss$|\.sass$/,
use: [
{
"loader": "postcss-loader",
"options": {
"plugins": [
postcssMomentumScrolling(),
]
}
}
]
},
],
},
};
As soon as I touch the scss chunk of the webpack config, it seems to do a replace instead of a merge or prepend, breaking the build.
I am wondering if anyone has a guide or suggestions on how to see what the initial webpack configuration that #angular/cli generates that is the starting point for modifications and a way to preview/peek at the code to be executed as debugging.
Also, an example of a similar customization would be great.
Thanks!
I think you need to tell to "customWebpackConfig" which portion to merge. Like this:
"mergeStrategies": {
"module.rules": "prepend"
}
In this way you're going to tell to merge with prepend strategy.
According to "custom-webpack" documentation it should default to "append" which doesn't seem the case in your example.
It's been a while since you've put the question but I wanted to actually ask if you have been able to fix it since I'm running in some issues getting my "module.rules" merged...it seems to work only if I set "replace" strategy.
I have problem with adding new format to beautify plugin. According to this instruction, point .5, I Have open defaultPreferences.json in notepad, added new lines and save file. Next when I open(or refresh) brackets IDE and open defaultPreferences, there's no that new lines, also beautify dont detect typescript. How to fix it?
Install Typescript support on Brackets Extensions Typescript extension
Install beautify Beautify Extension
Install Typescript and Typescript-formatter globally to have them accessible across all your projects npm install -g typescript typescript-formatter
Open Brackets.json, by selecting Debug > Open Preferences File
Note that this will split your Brackets window, make changes in brackets.json, as defaultPreferences.json is a read-only for your reference.
Append the following code block to the end of your JSON object.
"bb.beautify.beautifiers": {
"tsfmt": {
"command": "tsfmt"
}
},
"bb.beautify.languages": {
"css": "css",
"ejs": "html",
"handlebars": "html",
"html": "html",
"javascript": "js",
"json": "js",
"less": "css",
"php": "html",
"scss": "css",
"svg": "html",
"vue": "html",
"xml": "html",
"typescript": "tsfmt"
}
*Had technical issues formatting the JSON, please look at this image for the formatted block
I'd appreciate it so much if someone could please tell me a good way to handle bundling bower components. I feel like I've tried everything... Although, I can't seem to find any gulp tasks that handle this already. Could it really not exist?
Let's say it doesn't exist. Worst case scenario is I have to specify the paths of each "dist" file from bower_components folder. (It is annoying that each component seems to have its own "dist" folder... nothing is standardized.)
So even if I do that, I've noticed some components like 'active-support' seem to have require('lodash') and such in them. I think that if I just simply copy that file, it will break because the requires won't resolve.
What am I missing? How do I simply take all bower_components and bundle into a "common.js"... is there a way or is it a clusterfluck?
Update
As pointed out by Alerty, the new Gulp policy seems to be: use bower directly and glob patterns (and hope that the packages maintainers have a proper "ignore" properties).
Previously
You can use main-bower-files or gulp-bower-src to get files from your bower components. They can also use "ignore" or "main" overrides in your own bower file.
This is how I managed it (but see gulpfile.js for project structure, it's not a single gigantic gulpfile) :
https://github.com/notbrain/viceroy/blob/master/gulp/tasks/bower.js
Would be a bit more modular to simply concat all bower deps and then do the uglify() and minifyCSS() tasks separately on dist/ source locations, based on dev/prod env targets, but will have to wait for future updates.
Use main-bower-files:
var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
gulp.task('TASKNAME', function() {
return gulp.src(mainBowerFiles())
.pipe(/* what you want to do with the files */)
});
if you have folders like:
-app
-bower
-node_modules
Gulpfile.js
package.json
the solution are:
gulp.task("connect", function () {
connect.server({
root: ["app"],
livereload: true,
port: 8034,
middleware: function (connect) {
return [connect().use("/bower", connect.static("bower"))];
}
});
});
If your project use AMD specification.
You can use gulp-edp bundle the modules.
set module info at module.conf
{
"baseUrl": "src",
"paths": {},
"packages": [
{
"name": "etpl",
"location": "../bower_components/etpl/3.0.1/src",
"main": "main"
},
{
"name": "jquery",
"location": "../bower_components/jquery/1.9.1/src",
"main": "jquery.min"
}
],
"combine": {
"app": true
}
}
gulpfile.js
var gulp = require('gulp');
var edp = require('gulp-edp');
gulp.src(
[
'src/**/*.js'
'bower_components/**/*.js',
'!bower_components/**/{demo,demo/**}',
'!bower_components/**/{test,test/**}'
]
)
.pipe(edp({
getProcessors: function () {
var moduleProcessor = new this.ModuleCompiler();
return [moduleProcessor];
}
}))
.pipe(gulp.dest('dist'));
See EDP wiki for more features.
I am trying to use composer to autoload a third party library into my ZF2 application - specifically Google api.
I followed the answer in this post on SO, edited my composer.json
"autoload": {
"psr-0": {"Googleanalytics\\": "vendor/google-api-php-client/src/"}
}
and ran update.
I can see the entry in composer/autoload_namespaces.php
'Googleanalytics\\' => array($vendorDir . '/google-api-php-client/src'),
but i still get a fatal error class not found when trying to instantiate a class in that directory (Google_Client.php).
Any ideas what i am missing?
I am including the file in the class i am trying to use it:
use Googleanalytics\Google_Client;
I have tried renaming the directory in case the - was the problem and also creating a simple test.php file in that dir in case the underscore in the class name (Google_Client.php) was the problem, but still the same error.
Is there anything else i need to add to my ZF2 application to autoload this library?
Also note i decided not to use ZendGdata as this component does not seem to be maintained anymore.
Thanks in advance
The autoload definition of your software should not include the autoload definition of any vendor module. Move that to the package definition you use to include the software.
And in other news: If it does not work with PSR-0, the classmap autoloader should take care of it.
Update
How to create the package for a repository not offering a composer.json
Essentially you'd need only a couple of pieces of information:
The version number and where it's located in that repository.
A name of the software you are trying to use - you'd probably only want to add a vendor name and not be too creative with the module.
Know how to autoload the package, i.e. know which path is used for the software and apply the classmap autoloader to it.
At least one of the following, preferredly both:
The URL of the repository that hosts the code
The URL of a download of a published version
In case of the "google-api-php-client", the a) URL of the repository is http://google-api-php-client.googlecode.com/svn/, the b) most current version number is 0.6.7, the A) download URL of that package is http://google-api-php-client.googlecode.com/files/google-api-php-client-0.6.7.tar.gz.
And now you fill it into this "template":
"repositories": [
{
"type": "package",
"package": {
"name": "name from (2)",
"version": "version from (1)",
"dist": {
"url": "URL from (4/2)",
"type": "tar or zip according to download"
},
"source": {
"url": "URL from (4/1)",
"type": "svn",
"reference": "tags/version from (1)"
},
"autoload": {
"classmap": ["path from (3)"]
}
}
}
]
And then you can require that exact package in your requirements: "require": { "name from (2)": "version from (1)" }
For the google package you are using this would essentially get you to use this:
"require": {
"google/google-api-php-client":"*"
},
"repositories": [
{
"type": "package",
"package": {
"name": "google/google-api-php-client",
"version": "0.6.7",
"dist": {
"url": "http://google-api-php-client.googlecode.com/files/google-api-php-client-0.6.7.tar.gz",
"type": "tar"
},
"source": {
"url": "http://google-api-php-client.googlecode.com/svn/",
"type": "svn",
"reference": "tags/0.6.7"
},
"autoload": {
"classmap": ["src/"]
}
}
}
]
The benefit of adding this mostly boilerplate stuff is that you get the downloading of the software for free now. You don't have to care about how to manually download, unpack and install the package. You did add the autoloading information for this software to your own composer.json, but it is contained in the package definition of the software you want to use, it is not contained in the autoloading area of your own software.
You also do not have to worry about Composer removing your manually downloaded package accidentally.
For anyone else looking to add a third party library to ZF2 using composer, here are the steps that worked for me.
Copy third party library to vendor folder
Add following line to composer.json
"autoload": {
"classmap": ["vendor/PATH TO LIBRARY"]
}
Run php composer.phar update
Then you should see all the classes that were in the 3rd party library in the file in the composer folder: composer/autoload_classmap.php
When instantiating any class from the library in your zf2 application, dont forget to prefix the class name with a \.
For example:
$client = new \Google_Client();