This question has been asked before but there appears to be no concrete answer. My situation is perhaps simpler, and perhaps someone has found a solution by now.
I'm using vite to build a vue.js app, and wish to exclude a bunch of .js files which are just data (word lists for a word game) and which will be modified over time by the server. The files are in a subdirectory of the main build. I have added them into index.html:
<body>
<script type="module" src="./src/assets/words/3letter.js"></script>
......
<script type="module" src="./src/assets/words/9letter.js"></script>
<div id="app" align="center">
</div>
<script type="module" src="/src/main.js"></script>
and after reading through several posts here and at github I have modified vite.config.js in various ways:
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
},
optimizeDeps: {
exclude: [
'./src/assets/words/*.js'
],
},
// build: {
// commonjsOptions: {
// exclude: [
// './src/assets/words/*.js'
// ]
// },
// }
})
but neither the optimizeDeps method or the commonjsOptions method works; when I run npm run build the word files are still included in the build, and the refs to them are removed from index.html
If I remove type="module" from the html refs, the build process gives me errors:
script src="./src/assets/words/3letter.js" in "/index.html" can't be bundled without type="module" attribute
and the relevant lines aren't removed from index.html, but the word lists are still being bundled! - they're easy to see inside the big resulting built .js file
I guess I was taking the wrong approach.
Since the .js files I want to excllde are just data (which my change over time)....
export const words4 = [
"ABED",
"ABET",
"ABLE",
"ABLY",
"ABUT",
"ACED",
....]
.....it's best that I recreate them as .json files instead of .js files, then use an http GET to retrieve them. Or, since MySql will be running on the server, store the words lists there.
Related
I am using VuePress version:
"devDependencies": {
"vuepress": "^2.0.0-beta.26"
}
and I can't add a simple .vue component to my .md page.
My Github LINK
Tried out the other solutions here, but nothing seems to help:
Solution1
Solution2
I was following the guide from the official VuePress documentation about components. But all I get is a zero size component (no content shown)
Would really appreciate any solutions.
EDIT:
to make it a bit simpler than to check my github. The whole project contains anyway only 2 files.
So what I did, is to make a new component.vue file in .vuepress/components:
<template>
<h1>Hello from my test component</h1>
</template>
<script>
export default {}
</script>
<style></style>
and am trying to add it in my README.md file:
# Hello VuePress
### test component
<TestComponent />
<kebab-case-test-component />
Screenshot for my folder tree:
From the VuePress 1.x to 2.x migration docs:
.vuepress/components/
Files in this directory will not be registered as Vue components automatically.
You need to use #vuepress/plugin-register-components, or register your components manually in .vuepress/clientAppEnhance.{js,ts}.
To configure auto component registration:
Install the #vuepress/plugin-register-components plugin:
npm i -D #vuepress/plugin-register-components#next
Add .vuepress/config.js with the following contents:
const { path } = require('#vuepress/utils')
module.exports = {
plugins: [
[
'#vuepress/register-components',
{
componentsDir: path.resolve(__dirname, './components'),
},
],
],
}
demo
I am trying out the (as of now) latest version of vue-cli and ran into a problem importing static assets. My setup is pretty much a default fresh project with nothing but vuex selected and my first goal was to get a boring template with semantic ui running. This also implies jQuery with semantic ui depending on it.
To this end I added this script section to the main App.vue
<script>
require('~/jquery/dist/jquery.min.js');
require('./semantic/dist/semantic.js');
</script>
..following the URL transformation rules explained here. My (partial) folder structure is:
node_modules
jquery
dist
jquery.min.js
src
semantic
dist
semantic.min.js
Running npm run serve does find semantic but not jquery. Can someone tell me why this proposed method of including static assets does not work in this case?
Edit for clarification: My question is explicitly about this proposed method of importing and the URL transformation rules. For anyone needing some method of getting this to work I am currently using this as a workaround:
<script>
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;
require('./semantic/dist/semantic.js');
export default {
}
</script>
If you're using webpack. There is another method to includes jQuery as global variable using ProvidePlugin. You can add to your webpack.base.conf.js
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
}
If you're using Eslint, you need to add to .eslintrc.js
module.exports = {
globals: {
"$": true,
"jQuery": true
},
...
I am really new to Dojo so this may sound dumb.
I am using Dojo 1.7 as a hosted resource (that is, I downloaded the dojo package and put it under the source code). Then I have a customized module defined in another folder. The structure looks like this:
/
libs/
js/
dojo/
dojo.js
myPage/
myModules/
myCustomizedModule.js
index.html
I am using the "define" function to define a module in myPage/myModules/myCustomizedModule.js
In "myPage" folder, I am using index.html to require the customized module:
<script>
require(["myPage/myModules/myCustomizedModule"], function(myCustomizedModule){
// Do something.
})
</script>
However, I can't get it to work: the console reported an error:
"http://localhost/myDojoTest/libs/js/dojo/myPage/MyModules/myCustomizedModule.js 404 (Not found)".
I know this directory is not right since "myPage" folder is not under "libs/js/dojo". But it seems when using the "require" statement, instead of using the relative path of the current HTML document, the code uses the current path for the dojo.js file.
Is there anything I can do to correctly refer to my customized module?
Many thanks!
As per your requirement, you need to set up packages as indicated below
<!-- dojo configuration options -->
<!-- For Package configuration refer tutorial at http://dojotoolkit.org/documentation/tutorials/1.7/modules/ -->
<script type="text/javascript">
var dojoConfig = {
async: true,
baseUrl: "/",
tlmSiblingOfDojo: false,
packages: [
{ name: "dojo", location: "libs/js/dojo" },
{ name: "dijit", location: "libs/js/dijit" },
{ name: "dojox", location: "libs/js/dojox" },
{ name: "myModules", location: "myPage/myModules" }
]
};
</script>
You can than access dojo, dijit and myModules in require function call as.
Remember you need to precede the modules with their respective packages.
<script>
require([
//Require resources.
"dojo/store/Memory",
"myModules/myCustomizedModule"
], function(Memory, myCustomizedModule){
....
}
);
</script>
Hope it helps.
Well, I read all about build and all about dojo. Three days nightmare and so on... Need some help.
I'm using the last version of dojo. 1.7.2 in:
</sites/somesite/scripts/dojo17>
which contains
--dojo
--dijit
--dojox
--utils
I use the following profile:
dependencies = {
stripConsole: "all",
action: "release",
optimize: "shrinksafe",
layerOptimize: "shrinksafe",
//optimize: "closure",
//layerOptimize: "closure",
//mini: true,
//localeList : 'en-us',
//cssOptimize: "comments",
//selectorEngine: "acme",
releaseName: "content7",
layers: [
{
// This is a specially named layer, literally 'dojo.js'
// adding dependencies to this layer will include the modules
// in addition to the standard dojo.js base APIs.
name: "dojo.js",
customBase : true,
dependencies: [
"dojo.fx",
"dijit.form.Button",
"dojox.gauges.AnalogGauge",
"dojox.gauges.AnalogArcIndicator",
"dojox.gauges.AnalogNeedleIndicator",
"myApp.smartmix"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "myApp", "../../../myApp" ]
]
};
then i use this build script
./build.sh profile=../../../../myApp/myApp.profile.js releaseDir=../../../release
And I got the
</sites/somesite/scripts/release/content7>
which contains
--dijit
--dojo
--dojox
--myApp
NOW in my index.html file I have
<script type="text/javascript">
//<![CDATA[
var djConfig = {
parseOnLoad: true,
isDebug: false,
modulePaths: {
'myApp': '../myApp'
}
};
//]]>
</script>
<script type="text/javascript" src="scripts/release/content7/dojo/dojo.js"></script>
<script>
dojo.require('myApp.smartmix');
</script>
And YES this reduce the 230 files loaded without the build to 153 files.
BUT stills I (want to) believe that is posibble to reduce to one or 2 files.
But HOW?????
Please, some help will be appreciated!!!!
Ok, your profile is not right.
1st of all: You are using customBase, which is an advanced property for creating a minimal version of dojo core. I don't think you want that, do you? Normally, you just let dojo build its core normally, and that ends up as dojo.js in your output dir.
2nd of all: Every layer entry there will generate a minified .js file with all the files in dependencies inside it.
So, if you want your myApp stuff in a built JS file, you'll need to create a layer, and put your files in its dependencies.
Dojo will still generate all the individual files - but you don't have to deploy them. Just deploy the layer files. I usually have a layer for Dojo core, a layer for the dijit/dojox stuff I want, and then a layer for my custom JS. Then there are three JS files, which dojo will output in the dojo dir, and they are used in the HTML page.
...
layers: [
{
// this is a layer 'application', which will cache all
// dependencies to smartmix and declare smartmix in the same file
name: "../../../myApp/smartmix.js",
dependencies: [
"dojo.fx",
"dijit.form.Button",
"dojox.gauges.AnalogGauge",
"dojox.gauges.AnalogArcIndicator",
"dojox.gauges.AnalogNeedleIndicator",
"myApp.smartmix"
]
}
],
...
you will need only two requests;
<script src=..dojo.js></script>
and
<script>require(["myApp.smartmix"], function(smartmixApplication) { });</script>
this was my first dojo build so please excuse my ignorance in this matter.
I've just created my custom build from dojo build system using the following (very simplified) profile:
dependencies = {
stripConsole: "normal",
layers: [
{
name: "../dijits/cx/dijitsCXbuild.js",
copyrightFile: "CopyrightCX.txt",
dependencies: [
"dojo.parser",
"dijit.dijit",
"dijit._Widget",
"dijit._Templated",
"dijit._Container",
"dojo.i18n",
"dojo.NodeList-fx",
"dojox.grid.cells",
"dojox.grid.DataGrid",
"dojox.layout.GridContainer",
"dijit.TitlePane",
"dijits.cx.TaskPanel",
"dijits.cx.Identify"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "dijits.cx", "../dijits/cx" ]
]
}
... well, it all proceeds fine and I get my own package with everything I requested. Then in my webapp I include the following
<script type="text/javascript">
djConfig = {
isDebug:false,
parseOnLoad:true,
locale:getLocale()
};
</script>
<script type="text/javascript" src="Lib/cxdojo/dojo/dojo.js"></script>
<script type="text/javascript" src="Lib/cxdojo/dijits/cx/dijitsCXbuild.js"></script>
... looks ok, until the code needs to instantiate the first dijit and it fails with the notorious : "dijits.cx. TaskPanel is not a constructor."
I can get rid of this problem by including the "dojo.require()" but that's something I though I'll get rid of by creating my custom own build. Any ideas of what am I doing wrong or what shall I do in order to avoid that 'dojo.require()' lines...
thanks heaps.
You still need the dojo.require in your file. The compressed build just prevents the dojo.require from doing a GET request for the file that is required by concatenating all the files into one file and shrinking it. This saves cycles on page load quite a bit (as I'm sure you have seen by now).
If you really want to get rid of the many dojo.require (which I'm not too crazy about because I like seeing what's used in the page), you can do something like this:
dojo.provide('my.main');
dojo.require('dijit.cx.TaskPane');
... all the other dojo.require statements ...
Then put this in a file in a directory parallel to dojo:
Lib/cxdojo/my/main.js
Lib/cxdojo/dojo/dojo.js
.. etc ...
Then change your dependencies to be:
dependencies: [
"my.main"
]
Then in your file, you can include it with the script tag:
<script type="text/javascript" src="Lib/cxdojo/my/main.js"></script>
Then, you only need one require:
dojo.require('my.main');
Another advantage of this approach is that you only need to change one file (the /my/main.js) when you add a module to your application.