On the plugin's github page there is the following explanation to implement the plugin via AMD loader:
define([ "jquery", "plugins/jquery.panzoom" ], function( $ ) {
$(document).ready(function() {
$(".panzoom-elements").panzoom();
});
});
But how do I implement this plugin via nodejs & browserify?
This plugin uses UMD (Universal Module Definition) pattern, meaning you could use it also with CommonJS/Browserify module system as usual like any other lib/package.
(See: these lines of source code).
Installation:
npm install jquery.panzoom --save
Usage:
main.js
var $ = require('jquery');
require('jquery.panzoom');
$(document).ready(function() {
$(".panzoom-elements").panzoom();
});
Browserify:
browserify main.js -o bundle.js
Related
I am new in laravel. I installed npm before some days. And now I need editor in my application. So I have installed it via npm using "npm install summernote --save-dev" command. And add below lines in my app.js
require('./bootstrap');
require('summernote');
require('summernote/dist/summernote.css');
require('summernote/dist/summernote.js');
require('jquery');
$(document).ready(function() {
$('#content_editor').summernote();
});
and then compiled the assets via "npm run dev" command. But it will display 2 textarea, one that is in my html and second is summernote textarea. It is not displaying toolbars and other things. It is displaying only textarea.
Can anybody please help me to resolved this problem. I am newly learning laravel. So, I don't have deep knowledge of packages. I just want to display it without including css and js to header. I need it via webpack.
This code in app.js with Laravel 8 does work:
require('./bootstrap');
require('summernote');
require('summernote/dist/summernote.css');
require('summernote/dist/summernote.js');
import $ from 'jquery';
window.$ = window.jQuery = $;
$(document).ready(function () {
$('.summernote').summernote();
});
The trick is in webpack.mix.js configuration file. It should appear something like:
const mix = require('laravel-mix');
let path = require('path');
mix.webpackConfig({
resolve: {
alias: { jQuery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js') }
}
});
// Into app.js, you require 'summernote' as always
mix.js('resources/js/app.js', 'public/js');
Source: https://laracasts.com/discuss/channels/javascript/summernote-and-webpack
I have a Node js server app which uses Express and Pug. I would like to bundle it to single script which can be deployed by pm2. There seem to be several problems with this.
In runtime I get Cannot find module "." and during compilation few messages like
WARNING in ./node_modules/express/lib/view.js 80:29-41 Critical
dependency: the request of a dependency is an expression
appear which come from dynamic imports like require(mod).__express. I assume Webpack can't statically resolve those and does not know which dependency to include.
How can this be solved ?
How do I make Pug compile and be part of the output js ?
It is because webpack rebundle node_modules (already bundled) dependencies and in the case of pug, it doesn't work.
You need to use webpack-node-externals within the webpack externals option in order to specifically ask not to re-bundle depedencies.
Install webpack-node-externals: npm i -D webpack-node-externals
Integrate it your webpack config file:
Example
// ...
const nodeExternals = require('webpack-node-externals')
module.exports = {
target: 'node',
entry: {
// ...
},
module: {
// ...
},
externals: [nodeExternals()],
output: {
// ...
},
}
Hejsa,
I'm writing a webapp, which consists of a Node backend (Express server), which serves a Backbone app to the clients.
The Backbone app uses RequireJS to load the modules used.
I would like to use Ag-grid clientside, which can be included as an NPM module.
https://www.ag-grid.com/javascript-grid-getting-started/index.php
How can I reference this NPM module from Backbone?
Project structure
./node_modules
./src/package.json
./src/app (Node backend + Express server)
./src/public
./src/public/main.coffee (contains requireJs config)
./src/public/scripts (Backbone views, models, etc)
main.coffee
require.config
baseUrl: '../scripts/'
paths:
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min'
jqueryui: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'
...
I would like to include the ag-grid NPM module here, but without having to reference the very top ./node_modules folder as ../../../node_modules/ag-grid/dist/ag-grid (didn't count the levels..).
Also, I'd like if possible to avoid a second package.js, and a secondary npm install
Any help related specifically to this project structure?
Secondarily, is there any better way to structure such a project? (Node backend serving a Backbone webapp)
Thanks
You guessed it and using a relative path all the way to the node_modules directory is the way to go.
requirejs.config({
paths: {
"ag-grid": "../../../node_modules/ag-grid/dist/ag-grid",
"backbone": "../../../node_modules/backbone/backbone"
}
});
define(["backbone", "ag-grid"], function(Backbone, agGrid) {
// whatever
});
You could also use npm for all the dependencies and bundle an optimized version of your app using the RequireJS optimizer (r.js).
Personally, I use npm for the development of the project and for server-side (node) dependencies. For my Backbone app, I use Bower as it's specialized in front-end dependencies management.
I have a .bowerrc file that tells bower where to install the dependencies:
{
"directory": "src/lib",
}
And a Gulp task which calls bower install:
var bower = require("bower"),
$ = require('gulp-load-plugins')({ lazy: true }),
gulp = require("gulp");
gulp.task('bower', function() {
return bower.commands.install()
.on('log', function(data) {
$.util.log('bower', $.util.colors.cyan(data.id), data.message);
});
});
this task is called automatically after npm install with a npm hook:
"scripts": {
// ...
"postinstall": "gulp install"
}
Take a look at simplified-js-project, a sample project which shows my development tools around a Backbone and RequireJs project.
I use React on server rendering, so the react code need to be used both in node and client, on client side I use browserify.
now suppose I have a component:
var item = React.createClass({
//code here
})
in order to use this component in node I have to require React first, so the component will be
var React = require('React');
var item = React.createClass({
//code here
})
but if I use this component in client via browserify, the React librray will be required, in this case my build js file will be too big. I know I can ignore React in browserify like
browserify -i React
but if I ignore the React then the code:
var React = require('React');
will cause an error "undefined is not a function"
any idea how to avoid this?
You can put your vendor packages in a separate bundle:
browserify -r react -r underscore > vendor.js
And then declare that those dependencies will be provided by an external bundle (or multiple):
browserify -x react -x underscore main.js > bundle.js
And include both in your page:
<script src="vendor.js"></script>
<script src="bundle.js"></script>
You don't need to rebuild the vendor bundle(s) when you build your main bundle (unless you've upgraded dependencies). Usually you don't actually need to do this, and if you're concerned about build times in development: watchify is a a good replacement/addition.
When something is -r'd you can also require it in a plain script tag. This means that there's now a require global, which may clash with other scripts on the page.
<script>
var React = require('react');
</script>
If you're already including React via a separate <script> tag, use the browserify-shim transform to rewrite your require('react') call to use the global React variable.
Add the following config to your package.json:
"browserify-shim": {
"react": "global:React"
}
Use the transform when bundling:
browserify -t browserify-shim lib/index.js -o build/index.js
The bundled version should look something like this:
var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
Alternatively, you can omit the need for the -t browserify-shim argument by adding some browserify transform config to your package.json
"browserify": {
"transform": [ "browserify-shim" ]
}
I'm trying to build my require.js modules to one javascript file for production.
The command I'm running is...
r.js -o name=main out=main.min.js mainConfigFile=main.js
This compiles but the compiled main.min.js file is not compiled correctly and still includes the "define" statement blocks. and the browser obviously returns
Uncaught ReferenceError: define is not defined
My main.js file looks like:
require.config({
paths: {
jquery: 'libs/jquery/jquery',
},
shim: {
bootstrap: {
deps: ['jquery'],
exports: 'jquery'
}
}
});
require(['app', 'jquery'], function (app, $) {
'use strict';
// use app here
console.log(app);
console.log('Running jQuery %s', $().jquery);
});
Please let me know what I'm overlooking here.
Thanks!
You're correct, you need to include requireJS in your build. Take a look at http://requirejs.org/docs/optimization.html#onejs. You'll find an example for the command line there. If you're using a build profile it will look something like this -
({
baseUrl: "../Scripts",
paths: {
requireLib: 'libs/require'
},
name: "main",
out: "main-built.js",
include: ["requireLib"]
})
Quick fix: use r.js -o build.js instead of node r.js -o build.js
I had the problem when I was trying to call r.js through node:
node r.js -o build.js
Calling r.js directly fixed the problem:
r.js -o build.js
Note: r.js was installed globally with npm install -g requirejs