We Keep Coding

How can I concatinate the eslint airbnb style guide into one file to copy into package.json?

If you look at these directories and quoted file contents you can see the structure of the style guide .js files and how they all load into eslint:
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base/rules
//index.js
module.exports = {
extends: [
'./rules/best-practices',
'./rules/errors',
'./rules/node',
'./rules/style',
'./rules/variables',
'./rules/es6',
'./rules/imports', // (my note) not needed as uses extra plugin
].map(require.resolve),
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
rules: {
strict: 'error',
},
};
// .eslintrc
{
"extends": "./index.js",
"rules": {
// disable requiring trailing commas because it might be nice to revert to
// being JSON at some point, and I don't want to make big changes now.
"comma-dangle": 0,
// we support node 4
"prefer-destructuring": 0,
},
}
I would like to concatinate all the files together so I can paste it into my package.json. How can I do this? I don't know node, I don't need all the other stuff in the NPM download, I would just like a permanent copy of the current style guide in one file in one place. Cheers!

If you follow the instructions on installing eslint-config-airbnb-base: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base#eslint-config-airbnb-base-1, step 2 asks you to create a file .eslintrc in your project's root directory.
// .eslintrc
{
"extends": "airbnb-base"
}
You don't need to concatenate any files to use eslint-config-airbnb-base. Install it and create .eslintrc and you should be good to go.

I know this is old and I have not tried this but it should work.
Just copy the rule files from the Airbnb repo into your repo and then create a new copy from their index.js file called something else like "my-eslint-rules.js" in your repo. The last step is to have an .eslintrc that refers to this new file with extends.

Using Modules in the Browser (without WebPack)

I'm grokking my way through ES6 and I ran into Modules (nice!) and in learning, I am trying to see if I can use them in the browser without WebPack (which I haven't learned yet).
So, I have the following files/folder structure in my JS directory
js
- lib (for complied es6 via Babel)
- mods (compiled modules)
- module.js (compiled via Babel)
- app.js (imports modules, attached to index.html)
- src (for "raw" es6)
- mods (es6 modules)
- module.js (es6 module)
- app.js (imports modules)
In js/src/mods/module.js, I have the following code....
export const topTime = 1.5;
export const subTime = 0.75;
Which is imported by js/src/app.js ...
import { topTime, subTime } from './mods/modules';
console.log(topTime);
console.log(subTime);
I then compiled all es6 files to es5 (which placed the files in the lib dir.)
npm run babel
Now I can run the main file (js/lib/app.js) inside my editor (vscode/output tab)
[Running] node "/home/me/www/es6.local/js/lib/app.js"
1.5
0.75
...but I think that is only because it's running in node.
It breaks when I call my index.html file (with js/lib/app.js) in the browser (FF) as I get the following error...
ReferenceError: require is not defined
So I see that babel compiled this...
import { topTime, subTime } from './mods/modules';
into this...
var _modules = require('./mods/modules');
...But I thought this was valid es5? ...no? So HOW was this done BEFORE webpack? Please advise.
Here is my package.json (in case it helps)...
{
"name": "es6.local",
"version": "0.0.1",
"description": "JavaScript ES6 Testing Sandbox",
"main": "index.html",
"scripts": {
"babel": "babel js/src --out-dir js/lib --source-maps"
},
"author": "Student",
"license": "ISC",
"devDependencies": {
"eslint": "^4.16.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.0",
"eslint-config-airbnb": "^16.1.0",
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1"
},
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
}
}
]
]
}
}

I've been stuck with this for a while and after playing around I found a solution.
You don't need any libraries or webpack to do this and I'm not sure this works outside of chrome.
You need to run this code on a webserver or else it won't work (in other words, it has to be on localhost, NOT file://)
Make a folder called jsmodule
create a file called index.html with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js module</title>
</head>
<body>
<h1>JS module test</h1>
<script type="module" src="script.js"></script>
</body>
</html>
Create a file in same folder called script.js with the following code:
import Person from './Person.js';
import Book from './Book.js';
let person1 = new Person();
let someBook = new Book();
create a file in same folder called Person.js with the following code:
export default class Person{
constructor(){
alert("hallo from person");
}
}
create a file in same folder called Book.js with the following code:
export default class Book{
constructor(){
alert("Hallo from book");
}
}
Run the index.html on you webserver (localhost)

In the HTML
script src="/my-script.js" type="module">
In the script
import axios from './axios.js';
The script tag in the HTML needs to have the type of module, else the parser will not understand what import is.
The import statement needs to have the full path to the JS file you’re importing (relative paths should be fine): you cannot do import axios from 'axios' because that’s just a string — the browser has no idea if that’s even a file or where that file is.
The browser has no idea what NPM is. It’s a package manager for Node, it’s not connected to JavaScript in general. You need the actual file (which you could use NPM to add to your project, then the path will be something like ./node_modules/axios/dist/axios.js
but even using this could create some problem as it some internal dependency over some packages or libraries in node_modules folder
I would recommend using webpack or any blunder tool
which auto-magically use NPM modules then bundle everything up into a single output file.

It's a pain.
exports and require are part of the CommonJS spec. If I remember correctly, webpack implements it internally. You need the same functionality, because it's not part of ES5.
Try RequireJS, or something similar to load your modules.

JS compiled by Brunch does not run

I wanted to try out Brunch and am having some trouble getting my compiled JS files to execute in the browser.
The file gets compiled and loaded by the page into the browser. If I stick an alert or a console log in the source files and do a build, then nothing happens when I load the page.
If I edit the file manually and put a console log or an alert into it then it works just fine.
Does anyone have any ideas? I feel like I'm probably just missing something silly.
This is what I have in my brunch config file
exports.paths = {
watched: ['client'],
}
exports.files = {
javascripts: { joinTo: 'javascripts/app.js' },
stylesheets: { joinTo: 'stylesheets/app.css' }
}
exports.plugins = {
sass: {
options: {
includePaths: ['node_modules/foundation-sites/scss']
}
}
}
I have the following brunch plugins in my package.json
"babel-brunch": "^6.1.1",
"clean-css-brunch": "^2.10.0",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "^2.10.0"

are you requiring the build in your html?
see below:
<script src="app.js"></script>
<script>require('initialize')</script>
by default brunch.io registers everything into commonjs modules. It then registers a "initialize" module to bootstrap the app and start everything.

How to load external librarie i.e. moment.js in Amber-Smalltalk?

I don't get moment.js or other external libraries like tinymce working in my amber application.
These are the steps I did so far:
run bower install moment --save
added a moment.and.json in my applications root directory containing the correct path in bower_components:
{"paths": {"moment": "moment"}}
added "moment" to deploy.js
run grunt devel
My first problem is that from inside the js console momentjs seems to be not loaded, even if the file shows up in network traffic.
After that how do I use moment.js from inside Amber?
How do I need to wrap it?
I read how-to-add-a-non-amber-library-with-bower-for-example-processing and all the other explanations but still have problems grabbing the exact process.
All the documentation I read was inconclusive to me. Isn't there a simple explanation on how to do it?

The amd file has to look like this:
{
"paths": {
"moment": "moment"
},
"shim": {
"moment": {
"exports": "moment"
}
},
"config": {
"moment": {
"noGlobal": false
}
}
}
As it seems it has to be required like this to work properly: window.moment = require('moment');

RequireJs: module path does not exist error in build with r.js

I'm making use of RequireJs, and I'm having trouble with the build.
My structure is
webroot
css
/* css here */
files
img
js
emails
verify.js
lib
jquery-1.8.3.min.js
jquery-ui.min.js
jquery.ui.selectmenu.js
modernizr.js
require.js
orders
form.js
common.js
js-build
/* expected build output here */
js-tools
app.build.js
This is a part of a CakePHP project, but the webroot is where the actual webroot of the web server will be.
node and r.js.cmd are both on my path, so I haven't included it in the js-tools directory.
When accessing the default page, the is /, but it could also appear as /orders/form. For this reason, relative Urls to the JS is an issue.
When I load the JS, I'm using
<script type="text/javascript" src="/js/lib/require.js"></script>
<script type="text/javascript">
//<![CDATA[
require(['/js/common.js'], function(common){
require(['orders/form']);
});
//]]>
</script>
This is taken from https://github.com/requirejs/example-multipage-shim.
My common.js is
requirejs.config({
"baseUrl": "/js/lib",
"paths": {
"orders": "../orders",
"emails": "../emails",
"jquery": [
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min",
"jquery-1.8.3.min"
],
"jquery-ui": [
"//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min",
"jquery-ui.min"
]
},
"shim": {
"jquery.ui.selectmenu": ["jquery", "jquery-ui"]
}
});
As it stands, this works when working with unoptimized code. The important feature is that js is referenced with an absolute URL, is it can be picked up by the code from either /, or /orders/form.
My app.build.js is
({
appDir: '..', /* relative to app.build.js */
mainConfigFile: '../js/common.js', /* relative to app.build.js */
baseUrl: 'js/lib', /* relative to current directory */
dir: '../js-build', /* relative to app.build.js */
optimize: 'uglify2',
paths: {
"jquery": "empty:",
"jquery-ui": "empty:",
"jquery.ui.selectmenu": "empty:",
"common": "../common",
"orders": "../orders",
"emails": "../emails"
},
modules: [
{
name: 'common',
include: [
'modernizr'
],
exclude: ['jquery-1.8.3.min', 'jquery-ui.min', 'jquery.ui.selectmenu']
},
{
name: 'orders/form',
exclude: ['common', 'jquery.ui.selectmenu']
},
{
name: 'emails/verify',
exclude: ['common', 'jquery.ui.selectmenu']
}
]
})
When optimization runs as r.js.cmd -o js-tools\app.build.js from the webroot, I get a js-build directory with a copy of the whole webroot directory, optimized. Although not ideal (I wanted to limit it to just the js directory getting optimized), I can use my Ant driven build script to copy the contents of the js-build\js directory to the correct location.
When I run the build from the command line, the generated common.js, orders/form.js and emails/verify.js all exclude jquery.ui.selectmenu. common.js has modernizr included, as well as the header from the same lib. form.js and verify.js also exclude jquery.ui.selectmenu, and are devoid of any headers.
However, when I run from my Ant script, orders/form.js and emails/verify.js include jquery.ui.selectmenu and modernizr, even though I've given specific instruction for common and jquery.ui.selectmenu to be excluded.
I've excluded jquery.ui.selectmenu, because the particular version I am working with is written the the following form, and the browser has an issue with the end jQuery variable not being available. By excluding jquery.ui.selectmenu, I can attempt to load it separately, as though it came from a CDN.
(function($, undefined) {
$.widget("ui.selectmenu", {...
});
}( jQuery ));
So, my issue is, how come the same app.build.js is resulting in different output?

When dealing with relative paths you might need to include a "." at the beginning of the path string (to specify that you want to go from the current path). I ran into this issue recently while testing out r.js on grunt. I had set my baseUrl to "/" initially when it should've been "."
In your case, your baseUrl is set to "js/lib" - perhaps try ".js/lib"
It's a little weird since the error message I got seemed to have the correct base path as well as the relative path, but r.js was still unable to locate the file.
This question is pretty old but I see it has a bunch of views, so I figured I'd put this on here as it might help someone out there.