I am trying to add Bootstrap 4 to Aurelia. I can only get the CSS to work but the bootstrap.js requires Tether and I can't get it included, since I keep getting this error in the console:
Bootstrap tooltips require Tether
I tried something along this
"jquery",
"Tether",
{
"name": "tether",
"path": "../node_modules/tether/dist",
"main": "js/tether.min",
"exports": "Tether",
"resources": [
"css/tether.css"
]
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["tether", "jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
It does bundle, but it's still complaining about the missing Tether.
I read on another stack answer that I have to makeTetheravailable globally which could be done viarequirejs.config.js` with this
define(['lib/tether.min'], function(tether) {
window.Tether = tether;
});
but there's no such config with Aurelia.
After some more time spent on this, I believe that I came up with something working. I don't see anymore errors and I am now able to use Bootstrap tooltip, so I will assume this is the working solution.
All the changes were made inside the aurelia.json configuration file, as the following:
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/tether/dist/js/tether.min.js",
"scripts/require.js"
],
"dependencies": [
...
"aurelia-templating-binding",
"jquery",
"tether",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery", "tether"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
...
So basically, I just had to add it to the prepend to get it working. Also note that adding tether inside the deps[] array has no effect (probably because Tether is now global with the prepend), but I like to see it there as a reminder that it's a dependencies anyway.
EDIT
As mentioned by #Paul-Sebastian, it's probably better to remove tether from showing up in the deps of Bootstrap to remove possibility of double inclusion. Basically this is the updated code:
"tether",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
EDIT #2
There is now also an append section that just got added to Aurelia-CLI to help with Legacy Library with Plugins. The section reads as the following:
A Very Stubborn Legacy Library With Plugins
Some legacy libraries may support plugins which you also want included in your bundle. In some cases these plugins depend on a
global object defined by the main library, so it is important that the
plugins exist later in the bundle than the main library scripts. These
plugins can go in the append section, which works exactly the same
as the prepend section but the scripts are appended to the end of
the bundle, after all other items. Like the prepend section all items
are relative to the project folder, not the src.
Related
I am developing fullstack NPM packages with multiple entrypoints (namely client, server and sometimes tests), using the exports property of package.json.
I also use a small hack to make TS work with exports until it's officially supported (see this Stack Overflow post, this hackish solution and this ticket).
The package.json ends up looking like this:
{
"name": "#vulcanjs/graphql",
"version": "0.4.7",
"main": "./dist/index.js",
"files": [
"dist/"
],
"exports": {
".": "./dist/index.js",
"./server": "./dist/server/index.js",
"./testing": "./dist/testing.js"
},
"types": "./dist/index.d.ts",
"typesVersions": {
"*": {
"server": [
"./dist/server/index.d.ts"
],
"testing": [
"./dist/testing.d.ts"
]
}
},
"description": "Vulcan graphQL schema generator",
...
You can then import using either #vulcanjs/graphql for shared code, and #vulcanjs/graphql/server for Node.js-only code.
It works perfect in my Next.js app. However, it seems to break Jest moduleNameMapper.
First, I had this:
moduleNameMapper: {
"#vulcanjs/(.*)": [
"<rootDir>/node_modules/#vulcanjs/$1",
],
},
The error is:
Configuration error:
Could not locate module #vulcanjs/graphql/server mapped as:
[
"/code/vulcan-next/node_modules/#vulcanjs/graphql/server",
].
The problem is that it tries to find a package named #vulcanjs/graphql/server: yet "server" is not a different package, it's an entrypoint of #vulcanjs/graphql.
I've also tried this:
moduleNameMapper: {
"#vulcanjs/(.*)/(.*)": [
"<rootDir>/node_modules/#vulcanjs/$1",
],
},
With this config, #vulcanjs/graphql/server is mapped to #vulcanjs/graphql. The problem is that now, server code is not found. I've checked and the problem is that this solution totally removes the /server: so #vulcanjs/graphql/server points to the main entrypoints instead of the server entrypoint.
Finally I did try to remove the moduleNameMapper, but then #vulcanjs/graphql/server package is not found by Jest. Note that I need the mapper for a use case I did not demonstrate here, so getting rid of it is possible but not the best solution.
The bug can be reproduced by installing the framework: https://github.com/VulcanJS/vulcan-next. You can clone, yarn install, unskip the test in src/models/tests/sampleModel.server.test.ts and run yarn run test:unit sampleModel. It will show the error.
Any idea how I could fix this?
I believe there are some non-standard package.json keys out in the wild (like unpkg or jsnext). I think there's even one for style.
Is there any pseudo standard out there that others are using to define the location in their packages where static assets (images, fonts, etc.) live?
Something like:
{
"name": "my-package",
"main": "dist/index.cjs.js",
"assets": "dist/static"
}
You can use the directories or files key for that.
"files": [
"./src/assets/"
],
"directories": {
"assets:": "./src/assets"
}
I used to develop web sites with C# or Javascript with Visual Studio and IIS.
I've decided to upgrade to newer tools and try to create a simple web site with VSCode, NodeJS and TypeScript that I'll deploy to Azure later but each time I try a new sample, I get lost as I have the feeling it doesn't do what I want.
I created a TSConfig.json file with this minimum, I understood it creates a "project" in TypeScript:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
A simple main.ts file:
class Startup {
public static main(): number {
console.log('Hello World');
return 0;
}
}
Startup.main();
A simpliest index.html file that references the generated main.js file
I wanted to
- compile my web site using "$tsc-watch" to benefit from that automatic recompile
- launch the web site in NodeJS
- Open the web page in Chrome and being able to debug
But I am wondering, is it the right approach ? Should it be a tasks.json file that each time runs "$tsc-watch", launch the web site in Node and opens Chrome ?
I started with this tasks.json file :
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc-watch"
],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "Chrome",
"type": "process",
"command": "chrome.exe",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": ["./index.htm"],
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Then, VSCode created a launch.json file but I'm not sure why and where it fits in the picture:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Would you be able to help me understand what I am doing wrong here and what I need to simply debug my application in VSCode as I would pressing F5 in VSStudio.
Thank you for any help,
Claude
It looks like you're trying to create the entire build-chain and configuration yourself. I recommend starting with a tool that handles the initial bootstrapping for you. For exampe, use the vue-cli tool to bootstrap a vue.js project with TypeScript. While it may include a little bit of spin-up in understanding vue.js, the vue-cli tool lets you select options (e.g. TypeScript) and auto-generates a project for you. Then, just open the newly created folder in Visual Studio Code and start playing around.
Once you get a feel for how it all ties together, you can add VSCode specific tasks, start modifying configurations, etc.
There are a number of good tutorials on vue.js and, in practice, you'll probably want to leverage a front-end framework when building any real application anyway.
See the following links for tutorials and more information:
vue-cli
vue.js
I'm currently migrating a codebase from Babel 6 to 7. The code is made up of multiple individual projects with their own configs.
The main project imports files from external however the scripts being imported from external by main aren't being transpiled and fails on "Unexpected token import". Scripts located directly in main do transpile correctly.
I'm using the following command within the main project to transpile the scripts:
babel-node ./index.js
Another project uses Webpack to do the same thing and handles everything correctly.
This setup also worked fine with Babel 6.
.babelrc for main
{
"ignore": [
"node_modules"
],
"presets": [
["#babel/preset-env", {
"targets": {
"node": "current"
},
"useBuiltIns": "entry"
}]
],
"plugins": [
[
"module-resolver", {
"alias": {
"External": "../external"
}
}
],
"#babel/plugin-proposal-decorators",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-class-properties"
]}
.babelrc for external
{
"presets": [
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-runtime"
]}
I've created an example to detail my problem at:
https://gitlab.com/nerdyman/babel-7-external-import-broken
TL;DR I'm trying to import scripts from outside of a project's root directory but they don't get transpiled by Babel, the scripts from within the project do transpile.
I've managed to fix this by following this comment.
The solution is:
Move .babelrc in the main project to babel.config.js and make it a CommonJS module
Add --ignore=node_modules when running babel-node from the main project
This still seems pretty hacky and Babel doesn't seem to acknowledge the ignore property within babel.config.js it must be specified as a flag.
Babel 7 appears to only allow imports within the directory the babel config is in, however explicitly setting the --ignore flag overrides this.
You can view my working demo and the diff of what I changed to get it working.
The issue is still open on GitHub so there may be a better solution in the future.
current directory's .babelrc won't be loaded while import files in external directory, you may place a .babelrc in that directory and set its presets by relative path(instead of short name):
{ "presets": ["..\pad\node_modules\babel-preset-env"],
"retainLines": true }
I want to use Phaser in an aurelia CLI application using typescript,
npm install runs properly, and I have already modified aurelia.json as follows
...
{
"name": "phaser",
"path": "../node_modules/phaser/build",
"main": "phaser"
},
....
When I try to use phaser in a ts file, it says phaser is undefined. And in fact, looking cli onsole, doesn't seem to be tracking phaser. If I change dependency name to something like "phaserjs", it starts tracing it, but of course I cannot use it because the import requires another name.
import {autoinject} from 'aurelia-framework';
import * as phaser from "phaser";
#autoinject
export class Login {
attached():void{
console.log("this print undefined", Phaser);
}
}
I have tried using import * as phaser from "phaser", import {Game} from "phaser" and nothing seems to work.
However, looking at vendor-bundle.js, phaser.js lines are found. So I do not know why I cannot use it
Any help will be great.
For someone with same issue later:
Phaser 2x was not designed to be modular,. To be able to use it you need to exports a couple of dependencies it requires.
First, use phaser-ce (Community-edition), it has support for webpack.
Second, export its dependencies:
In aurelia using requirejs, modify aurelia.json vendor dependencies.
{
"name": "pixi",
"path": "../node_modules/phaser-ce/build/custom",
"main": "pixi",
"exports": ["PIXI"]
},
{
"name": "p2",
"path": "../node_modules/phaser-ce/build/custom",
"main": "p2",
"exports": ["p2"]
},
{
"name": "phaser-ce",
"path": "../node_modules/phaser-ce/build/custom",
"main": "phaser-split",
"exports": ["Phaser"]
},
Now you can use phaser without problems
import * as Phaser from "phaser-ce";
Phaser-CE also includes typescripts definitions inside its module folder "typings"