How to organise js file?

Questions
1

I’m new to framework 7. Currently, i’m using framework7 with webpack configuration. I notice two things:-
1)There is a file index.html which include app.js.
2)Each route actually combines index.html with respecticve module.
Is there any way to include one js file per page? Do i really need to initialise each js file as framework7 app or i just need to include import $$ from 'dom7'; or i need to include app instance in each file. Is there any tutorial or docs for optimum project structure?
Sorry, if my question sounds too broad.

2

Create project with Framework7-CLI and webpack and see how it is organised there

3

yes i created my project with cli. in that organisation , there is a app.js in which framework7 app in initialised. Now, i’m trying to create a separate js file for a view. should i import app from app/js or make a new framework7 app for that page?

4

If you create a standard .js file, just do something like this:

import something from "../js/something.js";

If it’s a component:

import myComponent from "../components/myComponent.vue";

If there are multiple exports from the file(s), just import what you need.

Webpack will take care of the rest…

Was that the information you were looking for?

5

now if i want to link that js file in ../pages/mypage.html, how can i do it? I tried linking it with <script src="/js/something.js></script , but it shows following message in console,
``

image
image.png1366×768 92.4 KB
which means it can’t find that scripts?
I solved that issue by transferring link from index.html to memo.html but now it shows 404:resource not found error.
my directory structure is:-
image

6

Please read my comment from yesterday and the webpack docs (at least how ‘Loaders’ work https://webpack.js.org/concepts/#loaders and you will be fine

7

I guess you are misunderstanding. loaders are the modules which are used to import modules in a .js file . What i’m trying to achieve is to import memo.js into memo.f7.html .I found one workaround to do so.
If i place memo.js into /static directory , then i can simply import it using,
<script src="static/memo.js"></script>. This methods works,but i can’t use
import $$ from 'dom7'; in it.

8

If you just want to add an additional .js file (not bundled by Webpack), just add it to the webpack.config.js…

module.exports = {
    mode: env,
    entry: [ './src/js/memo.js', './src/js/app.js' ],
    output: {
        path: resolvePath('www'),
1 Like