I'm trying to install a certain package in composer into a certain path, the package name is cyphix333/nbbc and normally it would be installed into vendor/cyphix333/nbbc however I wanted to install it into vendor/nbbc so I tried this in the main project composer.json
"require": {
//......
"cyphix333/nbbc": "dev-master"
},
"extra": {
"asset-installer-paths": {
//.....
"cyphix333/nbbc": "vendor/nbbc"
}
}
However it didn't work, it still installed into vendor/cyphix333/nbbc.
Edit: ...and here is the full data from the extra part, which comes from my php framework yii2:
"extra": {
"yii\\composer\\Installer::postCreateProject": {
"setPermission": [
{
"runtime": "0777",
"web/assets": "0777",
"yii": "0755"
}
],
"generateCookieValidationKey": [
"config/web.php"
]
},
"asset-installer-paths": {
"npm-asset-library": "vendor/npm",
"bower-asset-library": "vendor/bower",
"cyphix333/nbbc": "vendor/nbbc"
}
}
What am I doing wrong here?
1. asset-installer-paths = Composer plugin fxp/composer-asset-plugin
The asset-installer-paths directive belongs to the Composer plugin fxp/composer-asset-plugin.
The plugin is required, for this directive to work. But you are not requiring it in your project repo or globally.
Docu - Installation
composer require "fxp/composer-asset-plugin:~1.0"
or
composer global require "fxp/composer-asset-plugin:~1.0"
2. Is cyphix333/nbbc a Bower or NPM asset?
No.
3. What am I doing wrong here?
You think, that you can use asset-installer-paths directive to move your package to a specific folder. You can't. Because your repo is not an Bower or NPM asset.
4. How can i move my package from vendor/cyphix333/nbbc to vendor/nbbc?
Stop trying that. It's wasted time. Why? Composer has an Autoloader and he does the mapping from classname to filename. Please do not care about the path, just define an autloading strategy (files or classmap) and start using your class.
If you really need to copy stuff, you might use the scripts section of your composer.json.
https://getcomposer.org/doc/articles/scripts.md
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I have tried to install yii2-bootstrap4
but I got this composer error
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Installation request for yiisoft/yii2-bootstrap4 ^1.0#dev -> satisfiable by yiisoft/yii2-bootstrap4[1.0.x-dev].
- Conclusion: don't install bower-asset/bootstrap v3.3.7
- yiisoft/yii2-bootstrap4 1.0.x-dev requires bower-asset/bootstrap ~4.0.0 -> satisfiable by bower-asset/bootstrap[v4.0.0, v4.0.0-beta.3, v4.0.0-beta1, v4.0.0-alpha.6, v4.0.0-alpha.5, v4.0.0-alpha.4, v4.0.0-alpha.3, v4.0.0-alpha.2, v4.0.0-alpha1].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-beta.3].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-beta1].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.6].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.5].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.4].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.3].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.2].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha1].
- Installation request for bower-asset/bootstrap (locked at v3.3.7) -> satisfiable by bower-asset/bootstrap[v3.3.7].
Installation failed, reverting ./composer.json to its original content
I want to be able to use bootstrap3 and 4 in the same app, I also tried what is described in this issue "prefer-stable": true, and did not work also.
so what exactly should I do, how to use both bootstrap:~3.0 and bootstrap:~4.0 with official yii2-bootstrap packages
You can try to override some requirements in this way:
"minimum-stability": "dev",
"prefer-stable": true,
"require": {
"php": ">=5.4.0",
"yiisoft/yii2": "~2.0.14",
"yiisoft/yii2-bootstrap": "~2.0.8",
"yiisoft/yii2-bootstrap4": "1.0.x-dev",
"bower-asset/bootstrap": "3.3.7 as 4.1.3",
"npm-asset/bootstrap": "~4.1.3"
},
This will install bootstrap 3.3.7 from bower and bootstrap 4.1.3 from npm. You need to update path for bootstrap4 assets bundles:
'components' => [
'assetManager' => [
'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [
'sourcePath' => '#npm/bootstrap/dist'
],
'yii\bootstrap4\BootstrapPluginAsset' => [
'sourcePath' => '#npm/bootstrap/dist'
]
]
]
]
Note that yii2-bootstrap4 is not ready to use and does not even have a alpha/beta release, so expect many other problems.
A lot of solution on how to use Bootstrap 4 in Yii2. Even the Yii2 team created an extension for that. But since, I don't like too much configuration. This is what I did. In AppAsset.php, remove the yii\bootstrap\BootstrapAsset with custom your own. I'll recommend, you stick with the original filename and classname.
// AppAsset.php
public $depends = [
'yii\web\YiiAsset',
//'yii\bootstrap\BootstrapAsset', // Remove this
'app\assets\BootstrapAsset', // Add this
];
Then, I created a BootstrapAsset.php file in assets folder. Copy the code from yii\bootstrap\BootstrapAsset. Then changed some part of the code. No NPM, No Bower.
namespace app\assets;
use yii\web\AssetBundle;
class BootstrapAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'vendor/bootstrap/css/bootstrap.min.css'
];
public $js = [
'vendor/bootstrap/js/bootstrap.min.js',
'vendor/popper.js/umd/popper.min.js'
];
}
I'm trying to move one of my custom elements into a plug-in so that I can re-use it across projects.
I had a look at the skeleton plugin and noticed that it has a src/index.js that returns a config with all custom elements defined as globalResources.
So I tried the same thing and I basically have:
src/index.js
export function configure (config) {
config.globalResources([
'./google-map',
'./google-map-location-picker',
'./google-map-autocomplete'
]);
}
And then I have each one of my custom elements next to index.js, for example:
google-map.js
import {inject, bindable, bindingMode, inlineView} from 'aurelia-framework';
#inlineView(`
<template>
<div class="google-map"></div>
</template>
`)
#inject(Element)
export class GoogleMapCustomElement {
// All the Custom Element code here
}
I've also set up a basic npm script that runs babel on the code and sticks it in dist/:
"main": "dist/index.js",
"babel": {
"sourceMap": true,
"moduleIds": false,
"comments": false,
"compact": false,
"code": true,
"presets": [ "es2015-loose", "stage-1"],
"plugins": [
"syntax-flow",
"transform-decorators-legacy",
"transform-flow-strip-types"
]
},
"scripts": {
"build": "babel src -d dist"
},
Tbh I'm not entirely sure this is all correct but I took some of it from the skeleton plugin and it seems to run fine.
Anyway, the problem I'm having is that after I install the plugin (npm install --save-dev powerbuoy/AureliaGoogleMaps), add it to my aurelia.json in build.bundles[vendor-bundle.js].dependencies and tell aurelia to use it in main.js (.use.plugin('aurelia-google-maps')) I get:
GET http://localhost:9000/node_modules/aurelia-google-maps/dist/index/google-map.js (404)
So my question is, where does it get the dist/index/ part from?? I'm configuring my globalResources in index.js but nowhere does it say that I have an index folder.
What am I doing wrong?
Bonus question: What is the bare minimum required to transpile my ES6 plug-in code so that others can use it? Does my babel configuration look correct?
What about referencing your plugin within aurelia.json, like this:
{
"name": "aurelia-google-maps",
"path": "../node_modules/aurelia-google-maps/dist",
"main": "index"
}
I have absolutely no idea why, but in order to solve this problem I actually had to move my custom elements inside an index/ folder.
So now I have this:
- index.js
- index/
- custom-element-one.js
- custom-element-two.js
And my index.js still looks like this:
export function configure (config) {
config.globalResources([
'./custom-element-one',
'./custom-element-two'
]);
}
Where it gets index/ from I guess I will never know, but this works at least.
I did need the babel plug-in Marton mentioned too, but that alone did not solve the mystery of the made up path.
Edit: To elaborate a bit further, if I name my main entry point something other than index.js the folder too needs that name. For example, if I were to rename index.js main.js I would need to put my globalResources inside a folder called main/.
Update:
Edit: thanks for clarifying why you don't want to use the whole skeleton-plugin package.
Focusing on your original question: aurelia-cli uses RequireJS (AMD format) to load dependencies. Probably, your current output has a different format.
Add transform-es2015-modules-amd to babel.plugins to ensure AMD-style output, so it will be compatible with RequireJS and therefore with aurelia-cli.
"babel": {
"sourceMap": true,
"moduleIds": false,
"comments": false,
"compact": false,
"code": true,
"presets": [ "es2015-loose", "stage-1"],
"plugins": [
"syntax-flow",
"transform-decorators-legacy",
"transform-flow-strip-types",
"transform-es2015-modules-amd"
]
}
Original:
There are several blog post about plugin creation, I started with this: http://patrickwalters.net/making-out-first-plugin/ .
Of course, there have been many changes since then, but it's a useful piece of information and most of it still applies.
I'd recommend using plugin-skeleton as project structure. It provides you with a working set of gulp, babel, multiple output formats out-of-the-box.
With this approach, your plugin's availability wouldn't be limited to JSPM or CLI only but everyone would have the possibility to install it regardless of their build systems.
Migration is fairly easy in your case:
Download skeleton-plugin
Copy your classes + index.js into src/
npm install
...wait for it...
gulp build
check dist/ folder
most of your pain should now be gone :)
Here are some details based on my observations/experience.
1. Main index.js/plugin-name.js:
In general, a main/entry point is required, where the plugin's configure() method is placed. It serves as a starting point when using it within an Aurelia application. This file could have any name, usually it's index.js or plugin-name.js (e.g. aurelia-google-maps.js) to make it clear for other developers what should be included for bundling. Set that same entry point in package.json as well.
In addition to globalResources, you can implement a callback function to allow configuration overrides. That can be called in the application, which will use the plugin. Example solution
Plugin's index.js
export * from './some-element';
export function configure(config, callback) {
// default apiKey
let pluginConfig = Container.instance.get(CustomConfigClass);
pluginConfig.apiKey = '01010101';
// here comes an override
if (callback) {
callback(pluginConfig);
}
...
config.globalResources(
'./some-element'
);
}
Your app's main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-google-maps', (pluginConfig) => {
// custom apiKey
pluginConfig.apiKey = '12345678';
});
aurelia.start().then(a => a.setRoot());
}
2. HTML and CSS resources:
If you have html only custom elements, you can make them available using globalResources.
Custom css styling is going to require a bit of additional configuration in bundling configuration (see below).
3. Using the plugin with aurelia-cli: Documentation
One of the first new features you'll see soon is a command to help you with 3rd party module configuration. The command will inspect a previously npm-installed package, and make a configuration recommendation to you, automating the process if you desire.
While we are looking forward to that above moment, let's edit aurelia.json:
Configure plugin dependencies. If there are any external libraries (e.g. Bootstrap), then those should be included before your plugin.
Include your plugin:
...
{
"name": "plugin-name",
"path": "../node_modules/plugin-name/dist/amd",
"main": "plugin-name",
"resources": ["**/*.html", "**/*.css"] // if there is any
},
...
Now, your plugin is ready to include it in main.js as showed in Section 1..
I hope you didn't get sick of reading the word 'plugin' so many (21!) times. :D
I have started a project with amber init and then bower install processing --save to get processing.js added.
I do the initialisation with
firstProcessingInstance
<return Processing.instances[0]>
This method is called by the instance method initializeand it worked a pre-Amber v0.13 version.
How do I initialize Processing.js in Amber 0.13 and 0.14?
The code of the example is here
Addition after answer by Herby
In version 0.13 and 0.14 a configuration file processing.amd.json has to be added manually to the root directory. Files libraryname.amd.json in the root directory of the project are needed if the library does not have a local.amd.json file in the library directory.
Examples for libraryname.amd.json files from Amber Smalltalk and Helios are
project amber; file jquery.amd.json
{
"paths": {
"jquery": ["dist/jquery", "jquery"]
}
}
project amber; file es5-shim.amd.json
{
"paths": {
"amber_lib/es5-shim": "."
}
}
project helios; file showdown.amd.json
{
"paths": {
"helios/showdown": "src/showdown"
}
}
project: https://github.com/hhzl/Amber-snapsvg-demo
file: snap.svg.amd.json
{
"paths": {
"snap.svg" : "dist/snap.svg"
}
}
References
Amber may be a project and a library
Lego bricks illustration
Question
What is wrong with this processing.amd.json library mapping file?
{
"paths": {
"processing" : "processing"
}
}
Note After a change in processing.amd.json run grunt devel
Adding external non-Amber library to the project involves more steps than just bower install. You must create libdir.amd.json in root of the project with mapping the library file to the symbolic name. Then, you should add the symbolic name into either deploy.js or devel.js (depending on the context in which it is used), outside the place intended for amber packages (that is, not between the two delimiter comments).
EDIT: There is nothing wrong with the cited processing.amd.json, it's right and correct. With this, "processing" module name is mapped to .../processing/processing (.js is omitted from AMD mapping by design). After all, see your config.js to check the mapping is correct. If you have problems loading processing.js, it is outside this domain (.amd.json and Amber's mappings).
I develop an iPad/iPhone App web app. Both share some of the resources. Now I wanna build a bootstrap js that looks like this:
requirejs(['app'], function(app) {
app.start();
});
The app resource should be ipadApp.js or iphoneApp.js. So I create the following build file for the optimizer:
{
"appDir": "../develop",
"baseUrl": "./javascripts",
"dir": "../public",
"modules": [
{
"name": "bootstrap",
"out": "bootstrap-ipad.js",
"override": {
"paths": {
"app": "ipadApp"
}
}
},
{
"name": "bootstrap",
"out": "bootstrap-iphone.js",
"override": {
"paths": {
"app": "iphoneApp"
}
}
}
]
}
But this doesn't seems to work. It works with just one module but not with the same module with different outputs.
The only other solution that came in my mind was 4 build files which seems a bit odd. So is there a solution where i only need one build file?
AFAIK the r.js optimizer can only output a module with a given name once - in your case you are attempting to generate the module named bootstrap twice. The author of require.js, #jrburke made the following comment on a related issue here:
...right now you would need to generate a separate build command for each script being targeted, since the name property would always be "almond.js" for each one.
He also suggests:
...if you wanted just one build file to run, you could create a node program and drive the optimizer multiple times in one script file. This example shows using requirejs as a module and calling requirejs.optimize().
I took a similar approach in one of my projects - I made my build.js file an ERB template and created a Thor task that ran through my modules and ran r.js once for each one. But #jrburke's solution using node.js is cleaner.