时间戳

首页 > 解决方案 > 使用模块加载器的现代前端架构

angular - 使用模块加载器的现代前端架构

问题描述

我对现代前端架构/文件夹组织有点困惑。

在所有最流行的框架（angular、react、vue）中，我看到以下内容：

/src
----/app
----app.main.js
index.js

index.js是应用程序的入口点，是我们的应用程序被引导的文件。

app.main.js是我们应用程序的真正入口点。

假设我有一些要定义的全局变量或要包含的第三方库（js 和 css）。

我应该在哪里导入它们？

标签： angularreactjsvue.jsfrontend

解决方案

你的问题是一个广泛的问题。我需要指定一个框架来回答你，我会选择Vue.js。

在 Vue 上，您有一些所有组件都可以访问的结构，例如plugins：store和route. 这些家伙可以在您的index.js（或main.js）中导入一次。

应用文件

在这种情况下（Vue），App.vue除了渲染它所需的内容外，您不会导入任何内容。这个文件App.vue是一个组件，它的名字只是一个模式，你可以随意命名。例如，如果您只为旧网站创建一个组件，则不会创建应用程序，您只会创建一个组件（可能是 Callendar）。然后，您不需要创建一个名为App.vue.

全球进口

“全局导入”是上面提到的（插件、存储、路由等）。它们是在 上导入和启动的main.js。

插件

对于plugins（在 Angular 中使用的结构services and/or factory），您可以使用 in 导入main.js：

import Auth from './plugins/Auth'
Vue.use(Auth)

Obs：我使用插件来组织我的请求。它们可用于我的所有组件，我只是调用 using this.$auth.me().then(...)。

存储和路由

对于这两种情况，我们为每一种情况创建一个 index.js。

/
    src/
        router/
            index.js
        store/
            index.js
        App.vue
        main.js

每个都有一个特殊的结构来导入“插件”。main.js但是我以这种方式导入它们两个：

import Store from './store'
import router from './router'

new Vue({
  el: '#app',
  router,
  store: Store,
  template: '<App/>',
  components: {App}
})

重要的

在 ES6 中，如果你使用 import语句，它只会导入一次。然后，您可以在所有文件中导入相同的库，但它只会导入一次。

推荐阅读