a bit of a noob question -- I'd like to create two bundles -- app_bundle.js, and landing_bundle.js.
They will both share react, and a few other files, so I thought it would be a good idea to extract those out into a different, common bundle.
I found factor-bundle, but am having trouble getting it to work. This is what my config looks like for now:
browserify: {
app: {
files: {
'<%= yeoman.tmp %>/scripts/app_bundle.js': ['<%= yeoman.tmp %>/scripts/app.js'],
'<%= yeoman.tmp %>/scripts/landing_bundle.js': ['<%= yeoman.tmp %>/scripts/landing.js']
},
options: {
watch: true,
plugin: [
['factor-bundle', { o: [ '<%= yeoman.tmp %>/scripts/app_bundle.js', '<%= yeoman.tmp %>/scripts/landing_bundle.js'] }]
],
}
}
}
I ran it, got no errors, but am not sure where the factored bundle js actually is, I think it didn't actually save anywhere.
The thing I'm not understanding is, where will factor-bundle save the file? how would I go about specifying that?
In case you're still looking for help with this, here's how I have it set up in the app I'm working on at the moment. This should output three files in the dist directory: app.js, landing.js and common.js. common.js should contain all the stuff that's common to app.js and landing.js. Let me know if this is helpful--I'm pretty new to this stuff too.
browserify: {
app: {
files: {
'dist/scripts/common.js': [
'src/scripts/app.js',
'src/scripts/landing.js'
]
},
options: {
watch: true,
plugin: [
['factor-bundle', { o: [ 'dist/scripts/app.js', 'dist/scripts/landing.js'] }]
]
}
}
}
Related
I've a web built with Nuxt 2 deployed in Vercel where I'm using the #nuxt/content module for rendering some articles. It's using SSR and target: server, and everytime the server hibernates due to lack of activity, the first load takes +10 seconds or directly returns a timeout.
It's caused because when the server does the cold start, it is parsing the documents again reaching the time limit. I'm not sure why is this happening and how can I fix it. I guess moving to ssr: false can maybe help but I'm afraid my SEO can be affected. I believe a better solution should exist just to avoid re-parsing the documents everytime it does a cold start.
Nuxt version: 2.15.7
#nuxt/content version: 1.14.0
#nuxtjs/vercel-builder version: 0.22.1
Running on Node 16
Parsing documents at cold start
nuxt.config.js
export default {
ssr: true,
target: "server",
plugins: [
"#/plugins/articleManager.ts",
"#/plugins/leaflet.client.js",
"#/plugins/device.server.js",
],
components: true,
buildModules: [
"#nuxt/typescript-build",
"#nuxtjs/vuetify",
"vue-ssr-carousel/nuxt",
],
modules: [
"#nuxtjs/pwa",
"#nuxt/content",
"#nuxtjs/sitemap",
"#nuxtjs/robots",
"#nuxt/image",
],
content: {
fullTextSearchFields: ["title", "description"],
},
build: {
build: {
extend(config, { isClient }) {
if (isClient) {
config.devtool = "source-map";
}
},
},
},
srcDir: "src/",
};
vercel.json
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "#vercel/node"
},
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder",
"config": {
"serverFiles": [
".nuxt/content/**",
"src/content/**",
"server/**",
".nuxt/dist/sitemap-routes.json"
]
}
}
]
}
I've tried many configurations to avoid the server parsing the documents every cold start but didn't succed. I also tried keep ssr: true with target: static but didn't managed to make it work. And even if it worked, I doubt that would solve the problem.
Thanks!
After upgrading from Nuxt 2.14.12 to Nuxt Bridge, our TogetherJS implementation is not working now. From what I understand TogetherJS is not well maintained anymore but I figured it would at least work in our Vue app.
We're importing the script tag in nuxt.config.js after jquery and bootstrap. And also including a separate together-js-config file
script: [
{
src: "https://code.jquery.com/jquery-3.3.1.min.js",
type: "text/javascript"
},
{
src:
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js",
type: "text/javascript"
},
{
src:
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js",
type: "text/javascript"
},
{
src: "js/together-js-config.js",
},
{
src: "https://togetherjs.com/togetherjs-min.js",
// body: true
}
],
The error that's happening is just "TogetherJS is not defined" when trying to check if TogetherJS is running in the mounted lifestyle hook
if (TogetherJS.running) {
TogetherJS();
}
Does anyone have any suggestions here? Thanks!
My first question here on Stackoverflow :) I'm trying to make an app with Ionic&Vue, and as a CMS I'm using Umbraco. I want to connect the two, which I'm now trying by configuring Webpack, so that Webpack will take my main.ts file that Ionic&Vue created and do stuff with it and put it in the main Umbraco folder as a source file where I can reference Umbraco content.
I'm not having a lot of luck with it unfortunately. I've tried configuring a webpack.config.js file and installing a bunch of libraries like 'vue-loader', 'ts-loader', 'vue-template-compiler', 'vue-style-loader' et cetera. Some stuff is getting compiled, it's just that I keep getting an error that there's a mismatch in versions (vue is #3.0.2 and vue-template-compiler is #2.6.12). Ionic won't work with Vue under version 3 though so I feel like I'm stuck.
So my question: am I missing something? Is it really not possible or is there another way to compile a file from .ts to .js to a folder of my wish?
Edit (webpack config file):
var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = (env, argv) => {
let transpileOnly = argv.transpileOnly === 'true';
return {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundledwebpack.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
}
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
compiler: '#vue/compiler-sfc'
}
}
]
},
plugins: [
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
].concat(transpileOnly ? [
new ForkTsCheckerWebpackPlugin({
reportFiles: ['src/**/*.{ts,tsx,vue}', '!src/**/*.js.vue'],
tslint: true,
vue: true
})
] : [])
,
mode: 'development'
}
}
This sounds more like a vue issue than a Umbraco one. You should be able to do it. After a quick google there is a working project here:
https://github.com/ionic-team/ionic-vue-conference-app
Have you tried explicitly installing packages with version numbers that work, e.g.
npm install #ionic/vue#0.0.4
I am trying with following rollup.config.js file
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import copy from 'rollup-plugin-copy'
import clean from 'rollup-plugin-clean';
export default [
{
input: "src/index.ts",
external: Object.keys(pkg.peerDependencies || {}),
watch: {
skipWrite: false,
clearScreen: false,
include: 'src/**/*',
//exclude: 'node_modules/**',
// chokidar: {
// paths: 'src/**/*',
// usePolling: false
// }
},
plugins: [
clean(),
copy({
targets: [
{ src: 'src/*', dest: 'dist' }
]
}),
typescript({
typescript: require("typescript"),
include: [ "*.ts+(|x)", "**/*.ts+(|x)", "*.d.ts", "**/*.d.ts" ]
}),
],
output: [
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "esm" },
{
file: "example/src/reactComponentLib/index.js",
format: "es",
banner: "/* eslint-disable */"
}
]
}
];
I want to rebuild when anything in src changes. I have couple of files which are not imported in .js and .ts files but I want them to copy in dist folder. copy is working fine but the watch is not picking up changes in those other files. Tried alot of variations on chokidar options but no luck yet.
Anyone have any idea how to resolve this?
watch.include only works on files pertaining to the module graph so if they are not imported they won't be included (https://rollupjs.org/guide/en/#watchinclude).
You can solve this by creating a small plugin that calls this.addWatchFile on those external files when the build starts. Here is an example:
plugins: [
{
name: 'watch-external',
buildStart(){
this.addWatchFile(path.resolve(__dirname, 'foo.js'))
}
}
]
Combine it with some globbing utility such as fast-glob and just call this.addWatchFile for every file you want to copy:
import fg from 'fast-glob';
export default {
// ...
plugins: [
{
name: 'watch-external',
async buildStart(){
const files = await fg('src/**/*');
for(let file of files){
this.addWatchFile(file);
}
}
}
]
}
I'm using karma-eslint plugin. It looks very easy to use but for some reason, I don't see any errors or warnings and my tests are running smoothly even though I put some eslint errors
here is my karma.config.js file:
module.exports = function (config) {
config.set({
browsers: [process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap'],
'src/**/*.jsx': ['coverage'],
'test/**/*.js': ['eslint'],
},
eslint: {
engine: {
configFile: './.eslintrc',
emitError: true,
emitWarning: true
}
},
reporters: ['progress', 'coverage'],
coverageReporter: {
/* coverage configurations */
},
webpack: {
/* some webpack configurations */
}
The violation I planted in the one of my test.js files - define a new variable but not using it (eslint rule: 'no-unused-vars')
Please let me know if any further information is needed and I'll edit the post accordingly.
Cheers!
Found another solution!
in my webpack configuration I've used the eslint-loader' forwebpack` as follows:
webpack: {
module: {
preLoaders: [
{test: /\.js$/, exclude: /(src|node_modules)/, loader: 'eslint-loader'}
]
}
}