How can I see a list of all files found and bundled using the API, much like browserify's --list command-line option?
var browserify = require('browserify');
var b = browserify('main.js').bundle();
You can listen to the dep event, which is triggered for every dependency going through the pipeline:
var b = browserify('main.js');
b.on('dep', function(dep) {
console.log(dep.file);
});
b.bundle();
Got it, not a direct solution but the only foreseeable one.
When browserify('main.js').bundle() is called, browserify looks recursively through each of the required files and triggers any stream handlers set via b.pipeline.get('deps').push() when each file is found/read.
var dependencies = '';
b.pipeline.get('deps').push(through.obj(function(row, enc, next) {
dependencies += (row.file || row.id) + '\n';
this.push(row);
next();
}));
Related
The origin data is not from a file, but from a JSON object.
I already know how to use the native Node.js code to write a JSON file into the dist directory, but now I want to use vue.config.js webpack config to do this task.
I'm not familiar with webpack either. I simply checked some information, but I didn't find any way.
I hope to get some advice, thanks!
I found a solution.
const fs = require('fs-extra');
function JsonWebpackPlugin() {
fs.writeJSONSync('./public/some.json', { a: 1 });
}
JsonWebpackPlugin.prototype.apply = new Function();
module.exports = {
chainWebpack(config) {
config.plugin('Json').use(JsonWebpackPlugin);
}
}
I'm using the pre-build-webpack plugin to merge several json files into 1 json array every time I start my app (npm run serve or npm run build), but the problem is that it gets caught in an infinite webpack compile loop in when I start the development server. I managed to find a solution to the problem by using the watch-ignore-webpack-plugin plugin, which initially seemed to have resolved the issue - webpack will now compile everything twice (it seems) and then it's good to go and I can access my local server. But the problem now is that when I visit localhost:8080 there's nothing. The screen's blank and there's nothing being console.log()ed, so I don't know what to do anymore.
If anyone's seen anything like this or know how to fix it, please let me know. If you require any additional info, also let me know.
Versions:
vue: 2.6.10 (as seen in package.json)
vue-cli: 3.11.0 (running vue -V in cmd)
pre-build-webpack: 0.1.0
watch-ignore-webpack-plugin: 1.0.0
webpack-log: 3.0.1
vue.config.js (with everything irrelevant removed):
const WebpackPreBuildPlugin = require('pre-build-webpack');
const WatchIgnorePlugin = require('watch-ignore-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new WebpackPreBuildPlugin(() => {
const fs = require('fs');
const glob = require('glob');
const log = require('webpack-log')({ name: 'ATTENTION!' });
const output = [];
const exclude = [];
glob('./src/components/mods/**/*.json', (err, paths) => {
paths.forEach(path => {
const content = JSON.parse(fs.readFileSync(path, 'utf-8'));
const pathSplit = path.split('/');
const modFolderName = pathSplit[pathSplit.length - 2]
if(!output.filter(val => val.id === content.id)[0]) {
if(exclude.indexOf(modFolderName) === -1) {
output.push(content);
} else {
log.warn(`SKIPPING CONTENTS OF "${modFolderName}"`);
}
} else {
log.error(`MOD WITH ID "${content.id}" ALREADY EXISTS!`);
process.exit(0);
}
});
// If I take out this line, the infinite loop doesn't occur, but then, of
// course, I don't get my merged json file either.
fs.writeFileSync('./src/config/modules/layoutConfig.json', JSON.stringify(output));
});
}),
// Neither of the blow paths work.
new WatchIgnorePlugin([/\layoutConfig.json$/]),
// new WatchIgnorePlugin(['./src/config/modules/layoutConfig.json']),
]
}
};
I'm using mirage to mock some data and I'd like to mock an <img> with the appropriate file.
The problem is that I will have to place the image in /public/assets and the images placed there will be deployed later on as well.
Is there a way to avoid this? I couldn't find a recommendation in the ember cli website (https://ember-cli.com/user-guide/#asset-compilation)
I found one addon that could do this (ember-test-assets), but I'd like to avoid installing extra addons as much as possible.
Thanks!
You can exclude files in ember-cli-build.js with some help of Broccoli
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const Funnel = require('broccoli-funnel');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
// Add options here
});
// Filter your test files in 'production'
if (EmberApp.env() === 'production') {
return new Funnel(app.toTree(), {
exclude: ['**/test-*'] // e.g. any file prefixxed with 'test-'
});
}
return app.toTree();
};
References:
EmberApp.env(): https://github.com/ember-cli/ember-cli/blob/d97d96aa016fbe8108c2d2744c9823a0ea086b94/lib/broccoli/ember-app.js#L469
broccoli-funnel: https://github.com/broccolijs/broccoli-funnel (see exclude)
I'm using PouchDB and trying to add pouchdb-quick-search as plugin in npm way like described in it:
var PouchDB = require('pouchdb');
PouchDB.plugin(require('pouchdb-quick-search'));
But no success: search function is undefined.
Have anyone deal with it?
It works for me. I created a file called index.js containing:
var PouchDB = require('pouchdb');
PouchDB.plugin(require('pouchdb-quick-search'));
var db = new PouchDB('mydb');
console.log('db.search: ' + db.search);
Then I ran from the command line:
npm install pouchdb && npm install pouchdb-quick-search
node index.js
And it printed out:
db.search: function () {
var len = arguments.length;
var args = new Array(len);
var i = -1;
while (++i < len) {
args[i] = arguments[i];
}
return fun.call(this, args);
}
I'm using Node v4.0.0 on Mac OS X. Let me know if that helps.
I'm uploading a file from a browser <input type="file" name="myfile" id="myfile" using sails. I need to place it in other than the default express location. I'd use the following code in naked Express:
app.use(express.bodyParser({ keepExtensions: true, uploadDir: uploadFolder }))
For sails I wrote code along the lines of this relevant answer
First, I tried SkyTecLabs' answer. policies/configfileupload.js contains
'use strict';
var sailsExpress = require('../../node_modules/sails/node_modules/express'),
path = require('path');
console.log('.. initializing policies/configFileUpload');
module.exports = function configFileUpload (req, res, next) {
var uploadFolder = path.normalize(__dirname + '/../public/uploads');
console.log('.. in policies/configfileupload.js. uploadFolder=', uploadFolder);
console.log('typeofs are=',typeof req, typeof res, typeof next, typeof sailsExpress);
sailsExpress.bodyParser({ keepExtensions: true, uploadDir: uploadFolder });
next();
};
config/policies.js contains
'SchedController' : {
'uploadsubmit': 'configfileupload'
}
Express continues to upload the file to the default directory. Typeof req, res, next, sailsexpress are: object, object, function, function so the signature looks OK. (I tried returning the function configFileUpload just in case, but the controller was never called.)
Then I tried mikemcneil's suggestion. config/express.js
'use strict';
var sailsExpress = require('../node_modules/sails/node_modules/express'),
path = require('path');
module.exports.express = {
customMiddleware: function (app) {
var uploadFolder = path.normalize(__dirname + '/../public/uploads');
console.log('.. in config/express.js. uploadFolder=', uploadFolder);
console.log('typeof sailsExpress=', typeof sailsExpress, 'typeof app=', typeof app);
app.use(sailsExpress.bodyParser({ keepExtensions: true, uploadDir: uploadFolder }));
}
};
and the upload was still placed in the default directory. The typeofs sailsexpress and app are both function.
If the above code is correct for including express middleware in sails, then perhaps this middleware is performed only after express' formidable dependency parses the data and uploads the file.
I don't know in this case of any place in sails where I can place express configuration options such as bodyParser.
Warning: Before you release your app...
If you're expecting lots of file uploads, and especially big ones, you need to reconsider your strategy before deploying into production. You can replace the bodyParser middleware manually by replacing sails.config.express.bodyParser.
The default bodyParser in Express/Connect (and Sails, as of v0.9.x) uses a tmp directory to buffer files (similar to what you'd see in PHP). To get uploaded files somewhere else, you'll need to move them. Check out http://howtonode.org/really-simple-file-uploads for more on how to do that.
There is another option you might check out, depending on how adventurous you are. As I have time, I've been working on an alternative default bodyParser that can be used with Sails or Express. It defers to the underlying library for param/JSON parsing, but uses formidable's raw onPart events to allow streaming uploads without writing the entire file to disk. More on that:
Example repo: https://github.com/mikermcneil/stream-debug
Discussion: https://groups.google.com/d/msg/sailsjs/525fK7pgK8U/bduPudCSLUgJ
Source: https://github.com/mikermcneil/file-parser