I am making a hybrid application with SPA and Mvc 3. Now what i require is to load different pages with condition configs in backbone .
I have loaded my main file with like this
require
paths:
jquery:'Libs/jquery/jquery-1.8.0.min'
underscore:'Libs/Underscore/underscore.min'
backbone:'Libs/Backbone/backbone-min'
text:'Libs/Requirejs/text'
bootstrap:'Libs/Bootstrap/bootstrap.min'
jqValidation:'Libs/jquery/jquery.validate.min'
jqValUnobtrusive : 'Libs/jquery/jquery.validate.unobtrusive.min'
shim:
'underscore':
exports : '_'
'backbone':
deps: ["underscore"]
exports:'Backbone'
'bootstrap':
deps : ['jquery']
exports : 'jquery'
'jqValidation':
deps : ['jquery']
exports: 'jQuery.fn.validate'
'jqValUnobtrusive':
deps: ['jquery', 'jqValidation']
exports: 'jQuery.fn.validate.unobtrusive'
require ["App/app","backbone",'bootstrap'] ,(App,Backbone)->
app = new App()
Backbone.history.start()
Now this same set of config is required in other files also . Now how to load this config in each and every main.coffee file where I require ? I dont want this config to be redundant . Just one place I want to put it and then call it to other places . How to do that ?
Loading your require config from a single shared module is a very good plan.
This is the method I use. Different pages and my build system all use the same config file.
The tradeoff is you have to nest your require dependencies, but it's been worth for me.
Index.html, or any other page
<script>
require(['require_config'], function () {
require(['core'], function (core) {
window._app = core.start();
});
})
</script>
require_config.coffee
define [], () ->
require.config
packages: [
'core'
'dashboard/widgets/base'
]
paths:
# 3rd Party Bower Libraries
handlebars: "bower_components/require-handlebars-plugin/Handlebars"
underscore: "bower_components/underscore-amd/underscore"
jqueryui: "bower_components/jquery-ui/jqueryui"
shim:
bootstrap:
deps: [ 'jquery' ]
exports: 'jquery'
markdown:
exports: 'markdown'
Related
I create a Vue 2 project by Vue-Cli 5, then I want to remove "use strick" in the complied code.
As I Know, the #babel/plugin-transform-strick-mode may be enabled via #babel/plugin-transform-modules-commonjs, and the plugin is included in #babel/preset-env under the modules option.
But the Vue-Cli used a preset #vue/babel-preset-app by a plugin #vue/cli-plugin-babel for babel.
So my question is How pass strictMode: false as an option to the transform-modules-commonjs by #vue/babel-preset-app which preset is in the #vue/cli-plugin-babel ?
module.exports = {
presets: [["#vue/cli-plugin-babel/preset", { modules: "auto" }]],
plugins: [
// I tried this way, but it throw many errors like:
/**
ERROR in ./node_modules/axios/dist/node/axios.cjs 11:15-32
Module not found: Error: Can't resolve 'stream' in 'D:\workspace\cqset_offical_website\node_modules\axios\dist\node'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
*/
["#babel/plugin-transform-modules-commonjs", {}],
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
I have a javascript variable (var testButton) in my Nuxt plugins folder. I then added the file to my nuxt.config.js plugins. In my component, I have a Buefy button, and I'm trying to call the script:
<b-button #click="testButton">Click Me</b-button>
...
<script>
export default {
mounted () {
this.$testButton()
}
}
</script>
I import the script in my script section and have tried computed and mounted lifecycles. Not sure what I'm doing wrong. Thank you
Check the following things, you must be missing one or more:
1. Your plugin should export a method. That method should receive an 'inject' function and use it to register your 'testButton' function.
So, in your ~/plugins/testButton.js
export default (context, inject) => {
inject('testButton', () => {
console.log('testButton works!')
})
}
2. You shuold register your plugin correctly in the nuxt.conf.js file
Do it like so:
plugins: [
{ src: '~/plugins/testButton.js' },
],
3. Call it as '$testButton()' (note that Nuxt will have added a dollar sign to your method's name).
Your '$testButton' method will now be available from anywhere in your nuxt app. You don't have to import it o create any computed property.
<b-button #click="$testButton">Click Me</b-button>
<script>
export default {
}
</script>
I am using Babel 7.1 together with rollup (v0.67). This is my rollup config:
{
input: 'src/svg.js',
output: {
file: 'dist/myBundle.js',
name: 'myBundle',
sourceMap: true,
format: 'iife'
},
plugins: [
resolve({browser: true}),
commonjs(),
babel({
include: 'src/**',
runtimeHelpers: true,
babelrc: false,
presets: [["#babel/preset-env", {
modules: false,
targets: {
firefox: "63"
},
useBuiltIns: "usage"
}]],
plugins: [["#babel/plugin-transform-runtime", {
corejs: false,
helpers: true,
regenerator: true,
useESModules: true
}]]
})
]
}
I want to polyfill older browsers. According to the docs, I need to include babel-polyfill in my entry point which I did. Now babel should include only the polyfills needed (because of useBuiltIns: "usage"). However, even when specifying the newest Browsers as target, I get the full load of code into my bundle (10000 lines of code).
What I tried:
I tried useBuiltIns: "entry" which fixes it for newer browsers but its not what I want (it just includes all polyfills which are potentially needed by the browser no matter if they are actually used in the code).
change the order of the rollup plugins
not include the babel-polyfill import
I have no idea why this is happening. It would be great if someone could solve this issue. Its driving me crazy!
And if someone knows as a bonus why no sourcemap is generated I dont mind getting an answer for that, too
Hey I made a repo which explores a good babel/rollup setup utilising preset-env and useBuiltIns 'usage'.
// Rollup plugins
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input : 'main.js',
output : {
file : 'app.js',
format : 'iife',
name : 'PROJECT'
},
plugins : [
resolve(),
babel({
exclude : 'node_modules/**',
presets : [[
'#babel/env', {
useBuiltIns : 'usage'
}
]],
plugins : [
'#babel/plugin-transform-runtime'
],
runtimeHelpers : true
}),
commonjs()
]
};
Take a look https://github.com/matt3224/rollup-babel7
If you can figure out how to reduce the output further submit a PR
I'm trying to do code splitting and lazy loading with webpack using the import() method
import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
I'm getting
'import' and 'export' may only appear at the top level
Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()
var path = require('path');
module.exports = {
entry: {
main: "./src/app/app.module.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-application.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
]
},
resolve : {
modules : [
'node_modules',
'bower_components'
]
},
devtool : "source-map"
}
EDIT:
If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.
The use of System.import in webpack did not fit the proposed spec, so
it was deprecated in webpack 2.1.0-beta.28 in favor of import().
System.import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.
Install it with:
npm install --save-dev #babel/plugin-syntax-dynamic-import
And add it to your plugins:
{
presets: ['es2015'],
plugins: ['#babel/plugin-syntax-dynamic-import']
}
I'm having a hard time setting up Durandal to include the socket io library.
I've tried a few methods, including the path in the main.js library but as it isn't a single js file, it has never worked.
If anyone has experience with this, I'd extremely appreciate it!!
Thanks
Edited with code,
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1',
'toastr' : '../lib/toastr/toastr',
'moment' : '../lib/moment/moment',
'when' : '../lib/when/when',
'flipclock': '../lib/flipclock/flipclock',
'require': '../lib/require/require'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'require', 'plugins/http'], function (system, app, viewLocator, require, http) {
var io = require('socket.io')(http);
In order to work you need to add socket.io to the paths config, as well as define a shim.
Make sure the path to socket io is setup properly.
paths: {
....
'socketio': 'PATH_TO/socket.io/socket.io'
},
shim: {
'socketio': {
'exports': 'io'
}
}
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'bootstrap',
'socketio', 'knockout'],
function (system, app, viewLocator, bootstrap, io, ko) {
// if its on the same host
var testsocket = io.connect(window.location.hostname);
// otherwhise
var testsocket = io.connect(PATHTOSOCKET);
});
that should do the trick
EDIT:
Additionally it seems like you want to use the NPM package in the frontend, which is clearly not the way to go. Socket.IO creates a frontend proxy, which can be utilized the way described above.
You need to include socket.io in your requirejs configuration:
requirejs.config({
paths: {
...,
'socket': 'path/to/socket.io'
},
...
});
Then, you can access the library from within your application like such:
define([..., 'socket'],
function (..., socket) {
// body here with access to socket
socket.doSomething();
});
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1',
'toastr' : '../lib/toastr/toastr',
'moment' : '../lib/moment/moment',
'when' : '../lib/when/when',
'flipclock': '../lib/flipclock/flipclock',
'require': '../lib/require/require',
'socket': '../lib/socket.io/lib/socket'
},
So I've included it in my requirejs configuration.
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'require', 'plugins/http', 'socket'], function (system, app, viewLocator, require, http, socket) {
This seems to have help but now I'm getting,
Module name "events" has not been loaded yet for context: _. Use require([]) exception
. The page does load now, but I assume I must include "events" too?
The issues seems to be the standard require for socket io is something like this,
var io = require('socket.io')(http);
Which must resolve all the dependencies as the npm socket.io has modules within it. The requirejs path similar loads a single js file, were socket.io has many.