How do I integrate with AMD format with brunch.js - javascript

According to brunch docs AMD format can be configured so that modules are wrapped in AMD:
https://github.com/brunch/brunch/blob/master/docs/config.md#modules
Here is my brunch config:
exports.config = {
paths: {
watched: [
'src/styles/',
'src/scripts/'
],
public: 'public'
},
files: {
javascripts: {
joinTo: {
'scripts/vendor.js': /^src\/vendor/,
'scripts/head.js': /^src\/scripts\/head/,
'scripts/foot.js': /^src\/scripts\/foot/
}
}
},
modules: {
definition: 'amd',
wrapper: 'amd'
}
};
what I'm expecting is to see any files under src/scripts wrapped with a define wrapper:
define(['mymodule'] , function ($) {
return function () {};
});
Am I missing some part of the configuration?

Related

Babel Brunch doesn't seems to compile #polymer/lit-element module

I'm trying to integrate Lit-element into brunch. However, it seems like Babel plugin doesn't try to compile the lit-element module into the output, as it still use the original ES6 syntax of import / export.
Here's my brunch config :
`
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
// joinTo: 'js/app.js'
joinTo: {
'js/app.js': [
/^node_modules/,
/\app.js$/
],
'js/editor.js': [
/\editor.js$/
],
'js/select.js': [
/select.js$/,
]
}
},
stylesheets: {
joinTo: 'css/app.css',
order: {
after: ['../priv/static/css/app.scss'] // concat app.css last
}
},
templates: {
joinTo: 'js/app.js'
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to '/web/static/assets'. Files in this directory
// will be copied to `paths.public`, which is 'priv/static' by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
'static', 'css', 'js', 'vendor'
],
// Where to compile files to
public: '../priv/static'
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
},
sass: {
mode: 'native'
},
uglify: {
mangle: false,
compress: {
global_defs: {
DEBUG: false
}
}
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
}
Here is my app.js code
import {LitElement, html} from '#polymer/lit-element'
function autoComplete(options){ ... }
export var App = {
autoComplete
}
And last is the compiled code, along with console log :
...
require.register("#polymer/lit-element/lit-element.js", function(exports, require, module) {
require = __makeRelativeRequire(require, {}, "#polymer/lit-element");
(function() {
import { PropertiesMixin } from '#polymer/polymer/lib/mixins/properties-mixin.js';
// "Uncaught SyntaxError: Unexpected token {" on above line
import { camelToDashCase } from '#polymer/polymer/lib/utils/case-map.js';
import { render } from 'lit-html/lib/shady-render.js';
export { html, svg } from 'lit-html/lib/lit-extended.js';
...

Aurelia and System.js production build

I am maintaining an existing Aurelia project that apparently wasn't created with Aurelia CLI.
I need to create a production build but am not being able with the current configuration. The development build works just fine, but, as expected, downloads a lot of code to user machine.
After running gulp prod (gulpfile listed below), I get two JS files: app-build-{revnumber}.js and vendor-build-{revnumber}.js, but Aurelia keeps trying to load the main.js file.
I tried building the main.js together (commented code in gulpfile.js), but had no success - only vendor bundle is loaded:
Here are my config files:
config.js
System.config({
baseURL: "/www",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"stage": 0,
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"*": "src/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: { /* mappings */ }
});
gulpfile.js
var gulp = require('gulp');
var bundler = require('aurelia-bundler');
var image = image = require('gulp-image');
var replace = require('gulp-replace');
var gulpsync = require('gulp-sync')(gulp);
var config = {
force: true,
baseURL: '.',
configPath: './config.js',
bundles: {
// "dist/main": {
// includes: [
// '[main.js]'
// ],
// options: {
// inject: true,
// minify: false,
// rev: false
// }
// },
"dist/app-build": {
includes: [
'[**/*.js]',
'**/*.html!text',
'**/*.css!text'
],
options: {
inject: true,
minify: true,
rev: true
}
},
"dist/vendor-build": {
includes: [ /* all external modules */ ],
options: {
inject: true,
minify: true,
rev: true
}
}
}
};
gulp.task("bundle", function () {
return bundler.bundle(config)
.then(function () {
gulp.src('config.js')
.pipe(replace('dist/', ''))
.pipe(replace('src', 'dist'))
.pipe(gulp.dest(''));
});
});
gulp.task("unbundle",
function () {
return bundler.unbundle(config)
.then(function () {
gulp.src('config.js')
.pipe(replace('dist', 'src'))
.pipe(gulp.dest(''));
});
});
gulp.task("image-bundle",
function () {
gulp.src('./src/media/*')
.pipe(image())
.pipe(gulp.dest('./dist/media'));
});
gulp.task("files-bundle", function () {
return gulp
.src('./src/style/material.woff2')
.pipe(gulp.dest('./dist/style'));
});
gulp.task('prod', gulpsync.sync(['unbundle', 'bundle', 'image-bundle', 'files-bundle']));
gulp.task('dev', gulpsync.sync(['unbundle']));
index.html
<!DOCTYPE html>
<html>
<head>...</head>
<body aurelia-app="main">
<script src="www/jspm_packages/system.js"></script>
<script src="www/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
After a lot of little adjustments, I solved the main.js issue.
It seems like System.js looks for the dependency in the bundle and, if not found, it hits the network. Here's what I did to fix my bundle:
Consolidated dist/ folder as the bundle source
In config.js, set the path of * to dist/* and don't modify it in any Gulp task.
Before the bundle task runs, I copy all contents from src/ to dist/
In the dist/app-build bundle, I added the option depCache: true. It does not work when false (gives the error of main.js not found), but I don't really know why.
The added/modified Gulp tasks:
// deletes all files in the output path
gulp.task('clean', ['unbundle'], function () {
return gulp.src(['dist/'])
.pipe(vinylPaths(del));
});
gulp.task('copy', function () {
return gulp.src(['src/**/*'])
.pipe(gulpCopy('dist/', { prefix: 1 }));
});
gulp.task("bundle", sync(['clean', 'copy']), function () {
return bundler.bundle(config);
});
gulp.task("unbundle", function () {
return bundler.unbundle(config);
});

Karma unit test for ES6 modules with babel

I'm following instructions from karma-babel-preprocessor to set up unit tests in a project I'm currently working, but I always the error
'require is not defined'
My karma.conf.js is as follows:
files: [
{ pattern: './test/unit/*.spec.js', watched: true },
{ pattern: './src/js/es6_modules/*.js', watched: false },
],
preprocessors: {
'./src/js/es6_modules/*.js': ['babel'],
'./test/unit/*.spec.js': ['babel'] //, 'coverage'
},
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline'
},
filename: function (file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function (file) {
return file.originalPath;
}
}
The scripts in src/js/es6_modules jave ES6 classes exported. Something like:
export default class MyClass {
}
And my spec file would need to import this
import { MyClass } from "../../src/js/es6_modules/myclass";
I have seen some thread here at SO that said I would need to use browserify, but I can't find any doc (or example) on how to use it together with babel in karma. Does anyone know to configure this properly?
I fixed it using browserify instead of babel, and using a babelify transform
preprocessors: {
'./src/js/es6_modules/*.js': ['browserify'],
'./test/unit/*.spec.js': ['browserify']
},
browserify: {
debug: true,
"transform": [
[
"babelify",
{
presets: ["es2015"]
}
]
]
},

The generated AMD file is not including required files inside anonymous function and pollute the global namespace

The generated AMD file is not including required files inside anonymous function and pollute the global namespace
I got Uncaught ReferenceError: define is not defined
The generated js file https://dadasay.com/plugin/v1/js/dadasay.min.js is not including required files require.js
The js file generated by runninggulp minify_plugin_js
However, the expected export js file should be like this https://gist.github.com/anonymous/32894a4065ce338fb0416f4eb2b884dd
How could I do that in Gulp js and require.js
require.js config
'use strict';
var vendor_paths = {
require: './vendor/require',
jquery: './vendor/js/jquery-2.1.1.min',
...
}
require.config({
paths: vendor_paths,
hbs: { // optional
helpers: true, // default: true
templateExtension: 'hbs', // default: 'hbs'
partialsUrl: '' // default: ''
},
shim: {
handlebars: {
exports: 'Handlebars'
},
backbone: {
deps: [
'jquery',
'underscore'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
},
});
require(["app"],function(App){
define(["app"], function (App) {
$("#dadasay_comments_plugin").hide();
$('head').append('<link rel="stylesheet" href='+cfg.css_style_link+' type="text/css" />');
return App.initialize();
});
});
Gulp config
var v1_assets = {
css: ['public/plugin/v1/css/*.css'],
js: ['public/plugin/v1/src/**/*.js'],
require_manifest_file: "public/plugin/v1/src/main.js"
}
gulp.task('minify_plugin_js',function(){
gulp.src(v1_assets.js)
.pipe(amdOptimize("main",{
configFile: v1_assets.require_manifest_file,
findNestedDependencies: true,
include: true
}))
.pipe(concatFile('dadasay.min.js'))
})
Exported js min file
https://dadasay.com/plugin/v1/js/dadasay.min.js
define('app_config', [], function () {
return {
server_host: SERVER_HOST,
hideCommentsThreshouldNumber: 3,
comments_req_prefix: SERVER_HOST + '/api/v1/comments/load?og_url=',
css_style_link: [
SERVER_HOST,
PLUGIN_LOCATION,
'style.min.css'
].join('/')
};
});
....
The line:
define(["app"], function (App) {
is unnecessary. You required your application asynchronously already.
I believe that you could try to use the requirejs optimizer directly within gulp instead, here's how my build task looks like:
"use strict";
const requirejs = require("requirejs");
const path = require("path");
const _ = require("underscore");
module.exports = function (options, callback) {
// RequireJS Optimizer Build Configuration
// See this: https://github.com/jrburke/r.js/blob/master/build/example.build.js
// as an example file that details all of the allowed optimizer configuration options.
var buildConfig = {
appDir: options.dest,
baseUrl: "./",
optimize: "uglify2",
optimizeCss: "standard",
findNestedDependencies: true,
dir: options.build,
removeCombined: true,
fileExclusionRegExp: options.exclude || /test/,
modules: options.modules || [{
name: "runner"
}],
allowSourceOverwrites: true
};
var config = path.join(__dirname + "/../../", options.config);
var requireConfig = require(config);
_.extend(buildConfig, requireConfig);
requirejs.optimize(buildConfig, function (text) {
callback(null, text);
}, callback);
};
And then later in gulp:
const gulp = require("gulp");
const build = require("../task/build.task");
gulp.task("build", function (callback) {
build({ some: "options" }, callback);
});

requirejs throws a 404 trying to load a file from karma runner

I am trying to load a test helper module using requirejs, but it fails even when it has been already loaded as a dependency at the start of karma run, and I can't figure out what's the problem, I always get
There is no timestamp for /base/spec/helpers/testHelpers!'
Tests run fine, inside them I require any module of the app without problem, it only fails when I require specifically something from spec folder.
I have checked all karma related questions and none of them apply to these case.
My karma.conf file:
module.exports = function (config) {
'use strict';
config.set({
basePath: '',
frameworks: ['jasmine', 'requirejs'],
files: [
'bootstrapTests.js',
{
pattern: 'app/**/*.js',
included: false
},
{
pattern: 'entities/**/*.js',
included: false
},
{
pattern: 'config/**/*.js',
included: false
},
{
pattern: 'libs/**/*.js',
included: false
},
{
pattern: 'spec/**/*Spec.js',
included: false
},
{
pattern: 'spec/helpers/**/*.js',
included: false
}
],
exclude: [
'bootstrap.js',
'bootstrap.built.js'
],
preprocessors: {
'app/**/*.js': ['coverage'],
'entities/**/*.js': ['coverage']
},
coverageReporter: {
reporters: [
{
type: 'text-summary'
}
]
},
reporters: ['progress', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
});
};
My bootstrapTests.js file:
var tests = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
// Add all spec files and helpers
if (/spec\/.+.js$/.test(file)) {
tests.push(file);
}
}
}
require.config({
baseUrl: '/base',
paths: {
'backbone': 'libs/backbone',
'marionette': 'libs/backbone.marionette',
'jquery': 'libs/jquery-2.1.1',
'json2': 'libs/json2',
'underscore': 'libs/underscore',
'twig': 'libs/twig',
'editor': 'app/editor',
'widgets': 'app/widgets',
'menu': 'app/menu',
'helpers': 'spec/helpers'
},
map: {
'*': {
'jquery': 'config/jquery/jqueryPrivate'
},
'config/jquery/jqueryPrivate': { 'jquery': 'jquery' }
},
deps: tests,
callback: window.__karma__.start
});
so in my tests,
define([
'app/app',
'backbone',
'editor/editorController',
'editor/editorApp',
], function (
myApp,
Backbone,
editorController
) {
'use strict';
describe('editorApp', function () {
.....
works like a charm, but when I try
define([
'app/common/routerUtilities',
'backbone',
'helpers/testHelpers'
], function (
routerUtilities,
Backbone,
testHelpers
) {
'use strict';
describe('routerUtilities', function () {
...
it fails trying to fetch testHelpers, always get the error even when the module is already loaded. I tried specifying the path in all possible ways besides the shortened one: spec/helpers/testHelpers, /base/spec/helpers/testHelpers, /spec/helpers/testHelpers, ../../helpers/testHelpers, etc...
The file is included in tests array as a dependency (checked), so it's loaded (checked with console.log) along my tests and other test setup modules:
LOG: ['/base/spec/app/appSpec.js',
'/base/spec/app/common/routerUtilitiesSpec.js',
'/base/spec/app/editor/EditorLayoutViewSpec.js',
'/base/spec/app/editor/editorAppSpec.js',
'/base/spec/app/editor/editorControllerSpec.js',
'/base/spec/app/menu/menuControllerSpec.js',
'/base/spec/helpers/envSetup.js',
'/base/spec/helpers/testHelpers.js']
I've checked that is included in window._ karma _.files as well (edited for brevity):
LOG: Object{
/base/bootstrapTests.js: 'c389a1d36d1c48f2879d434b10fd5a25b6b07758',
/base/app/app.js: '7ad39554809146effd20dd1db908fc068f8119ba',
/base/app/common/routerUtilities.js: '4da0e1d1794cccc727b544cacbc6d672c0d9965a',
...
/base/config/marionette/renderer.js: '34a5e729f6133aa13841c5e949307cd437ca331b',
/base/config/marionette/templateCache.js: '9f1901d4c6f43f5f90dadacb1c4ac179efd14b15',
/base/spec/app/appSpec.js: 'e01f4fea3533e25cfcd4f7621e1c1c5559e0eed8',
/base/spec/app/common/routerUtilitiesSpec.js: 'a06b9793a635633d053142dff24d1ba4427dd365',
/base/spec/app/editor/EditorLayoutViewSpec.js: 'a24c7e8742e38b86d626bd6f3e45baacfa6af5eb',
/base/spec/app/editor/editorAppSpec.js: '800c0e8e82840ebd0d1af07c3ec4556a24ee0b04',
/base/spec/app/editor/editorControllerSpec.js: 'd2e259a477da85b6a2f742f5c6c3a4a34b7e340b',
/base/spec/helpers/envSetup.js: '297aa1e59477d967aa210bece1726e8a372cb630',
/base/spec/helpers/testHelpers.js: '5266065d344ca69f8f5980db16bf6d131492ebd0'
}
The content of spec/helpers/testHelpers.js is:
define([
'backbone'
], function (
Backbone
) {
'use strict';
var testHelpers = {
setupRoutingTest: function () {
Backbone.history.start();
Backbone.history.navigate('');
},
teardownRoutingTest: function () {
Backbone.history.navigate('');
Backbone.history.stop();
}
};
return testHelpers;
});
My folder structure is:
|-app
|---common
|---editor
|---menu
|---widgets
|-config
|---jquery
|---marionette
|-entities
|-features
|-gruntTasks
|---lib
|-spec
|---app
|-----common
|-----editor
|-----menu
|-----widgets
|---entities
|---helpers
|-tmp
Hi it looks like the karma-requirejs doesn't like the resources to be loaded into the tests array.
Try to modify the code to exclude the helper files and it could help
var tests = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
// Add all spec files and helpers
if (/spec\/.+.js$/.test(file)) {
tests.push(file);
}
}
}
This drove me a little nuts a while back. Make sure you're using karma-requirejs, not just requirejs.
https://www.npmjs.org/package/karma-requirejs
On that note, don't also load the production version of requirejs.

Categories