How can I import a.js and b.js and export as combined bundle.js in UMD format using rollupjs?
Here is the example:
//a.js
export default class A {
...
}
//b.js
export default class B {
...
}
My current rollup.config.js is:
export default [
{
input: ["path/a.js", "path/b.js"],
output: {
file: "path/bundle.js",
format: "umd",
name: "Bundle"
},
plugins: [
// list of plugins
]
}
}
However, this is not working as intended.
Anything wrong with this config?
Thanks for your help.
You need a file to tie them together. So along with a.js and b.js, have a main.js that looks like this:
import A from './a';
import B from './b';
export default {
A,
B,
};
Then update your rollup.config.js with input: path/main.js.
Related
I am currently keen to updating my existing Nuxt 2 project to Nuxt Bridge as documented here:
https://v3.nuxtjs.org/getting-started/bridge
As for my nuxt.config file I used module.exports = { //config }
Exchanging it with the:
import { defineNuxtConfig } from '#nuxt/bridge'
export default defineNuxtConfig({
// Your existing configuration
})
leads to a webpack error for me because of the "#nuxtjs/firebase" module:
How can I fix this?
You must specify an alias for tslib:
import { defineNuxtConfig } from '#nuxt/bridge'
export default defineNuxtConfig({
alias: {
tslib: 'tslib/tslib.es6.js'
}
})
Follow this issue: https://github.com/nuxt/bridge/issues/25
in my Nuxt project I have a background scene made with Three.js.
Now I want to load an .obj into this scene. So the model has to loaded via the component.
my index.vue component:
export default {
name: 'scene',
data () {
return {
}
},
mounted () {
if(!this.scene) this.scene = new Scene({
$canvas: this.$refs.canvas,
});
}
}
In my .js file(Inside the components, where the .vue is as well):
import * as THREE from "three";
import Common from "../Common";
import { OBJLoader2 } from '~/node_modules/three/examples/jsm/loaders/OBJLoader2.js';
const Model = require('#/assets/models/background_1.obj')
export default class Model_1{
constructor(){
this.init();
}
init(){
var loader = new OBJLoader2();
console.log(Model)
loader.load(Model, (root) => {
Common.scene.add(root);
});
}
}
The Nuxt config:
export default {
mode: 'universal',
build: {
vendor: ['hammerjs'],
extend (config, ctx) {
config.module.rules.push(
{
test: /\.(obj|gltf)$/i,
loader: 'file-loader',
}
);
}
}
}
Following error appears:
Cannot find module '#/assets/models/background_1.obj'
I though that the .vue component will look into the assets folder, gets the obj and just reflects the url. But it's looking for a module, which I don't really understand 🤷♂️
The .obj file is located in the assets/models folder.
Ok, although every doc said that if the file is in static/file you'll have to use the src static/file. Now that did not work for me, but just using file as source worked. It's working, but can someone please clarify this since I've been on this problem since 2 days and many migraines 😐
Transfer the file to static folder example static/images/background.png
Then omit the #/assets/
var textureURL = "images/background.png";
var texture = textureLoader.load(textureURL);
I have tried to import vuetify in the configuration file in storybook but gets an error saying:
" Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
#import '../../styles/styles.sass' "
the configurations file looks like this ./.storybook/config.js):
import { configure } from '#storybook/vue';
import '../src/plugins/vuetify';
configure(require.context('../stories', true, /\.stories\.js$/), module);
I have a story with vuetify components inside. The story looks like this (./stories/3-priceStock.stories.js):
import Pricestock from './../src/components/organisms/priceStock.vue';
import priceStockDescription from './descriptions/PriceStock.js';
export default {
title: 'Organisms',
};
export const priceStockCom = () => ({
components: { Pricestock, priceStockDescription },
data() {
return {
productItem: "data",
productItemProce: "data",
}
},
template: '<div><priceStockDescription /><pricestock :priceInformation="productItemProce"
:productInformation="productItem">hej</pricestock></div>'
});
How do I load vuetify inside storybook?
I'm currently using vue2-editor and importing quill modules and registering them as per documentation.But getting error window.Quill is undefined.
I've tried webpack plugin mix to include window.Quill and Quill but still error remains the same.
In my vue component
import { VueEditor } from "vue2-editor";
import { Quill } from "quill";
import { ImageDrop } from "quill-image-drop-module";
import { ImageResize } from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
And in my webpack mix
mix.extend('foo',new class{
webpackPlugins(){
return new webpack.ProvidePlugin({
"window.Quill": "quill/dist/quill.js",
Quill: "quill/dist/quill.js"
});
}
});
Uncaught TypeError: Cannot read property 'imports' of undefined
which is from window.Quill.imports
You need to get REALY working files from https://www.jsdelivr.com/package/npm/quill-image-resize-vue:
Just install npm i --save quill-image-resize-vue
and use another file:
import { VueEditor,Quill } from 'vue2-editor'
import ImageResize from 'quill-image-resize-vue';
import { ImageDrop } from 'quill-image-drop-module';
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
export default {
name: 'MainForm',
components: { VueEditor},
data() {
return {
content: '<h2>I am Example</h2>',
editorSettings: {
modules: {
imageDrop: true,
imageResize: {},
}
}
}
},
//........
}
For me got fixed after changing
import { ImageResize } from "quill-image-resize-module";
to
import ImageResize from "quill-image-resize-module";
I am trying to port the vue-material library to ESM so I can use it in a project. I am trying to use rollup with rollup-plugin-sass. I have the following rollup config...
import VuePlugin from 'rollup-plugin-vue';
import css from 'rollup-plugin-css-only';
import commonjs from 'rollup-plugin-commonjs';
import sass from 'rollup-plugin-sass';
// const external = Object.keys(pkg.dependencies);
const plugins = [
commonjs(),
VuePlugin(),
sass(),
css()
];
const globals = {
vue: 'Vue'
};
module.exports = {
plugins,
input: 'src/index.js',
output: {
file: 'dist/index.js',
format: 'esm'
}
};
However, when I build I get...
[!] (VuePlugin plugin) Error: Error: Can't find stylesheet to import.
src/components/MdApp/MdApp.vue 131:9 root stylesheet
I check and line 131 is...
#import "~components/MdAnimation/variables.scss";
This file does seem to exist under the src/components folder but it isn't getting recognized. I also tried this...
sass({
includePaths: [ 'src/' ],
importer(path) {
return { file: path[0] !== '~' ? path : path.slice(1) };
}
}),
But I still get the same thing. How do I configure rollup-plugin-sass to use partial imports using ~?