相关疑难解决方法(0)

我目前正在通过webpack/babel在React应用程序中使用ES6.我正在使用索引文件来收集模块的所有组件并将其导出.不幸的是,这看起来像这样:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

所以我可以很好地从其他地方导入它,如下所示:

import { Comp1, Comp2, Comp3 } from './components';

显然这不是一个非常好的解决方案,所以我想知道,如果有任何其他方式.我似乎无法直接导出导入的组件.

我正在研究一个反应项目(我的第一个),我最近重组了我的文件夹结构,使其更有意义.

为了让我的生活更轻松,在我的组件文件夹中,我有一个index.js如下所示的文件:

export * from './App';
export * from './Home';
export * from './PageWrapper';

(这个想法是从另一个StackOverflow问题中解除的)

在这种情况下,此索引指向的每个文件都具有单个类导出.

现在在我的主要应用程序中,我尝试做类似的事情:

import {Home, App} from './containers/index';
//or
import Home from './containers/index';

什么都行不通.我发现如果我将它们全部分成直接指向正确文件的单独行,它就可以工作.

import Home from './containers/Home';
import App from './containers/App';

那么我可以按照我的方式导入多个类,而我只是没有看到它？我是否需要将它们全部命名(App as App)？或者这仅仅是强制限制？

我知道我可以在ES6中要求这样的文件:

require('./config/auth');

当我尝试这样做

require('./config/');

我明白了:Module not found: Error: Cannot resolve directory './config'.为什么会这样？我怎么能要求目录？

所以我试图创建一个vue实例,需要文件夹"views /"中的其他组件

这是文件结构:

• 项目
  • 建立/
  • 配置/
  • node_modules /
  • SRC /
    • 意见/
    • 组件/
  • App.vue

如果我在App.vue中执行此操作,服务器将运行,没有错误:

import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'

但是,如果我尝试这样做:

import { AppMain, Navbar, Topbar } from 'layouts/'

服务器将无法运行并将返回:

This dependency was not found:
* views/ in ./src/router/index.js

这是webpack.base.config.js

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: { …

我正在尝试重新配置我的Symfony 3项目以使用webpack安可而不是正常的asstets.我有点困惑.

对于应用程序的一部分,我开发了一些继承自Kube的JS插件(CSS和JS框架,我没有注意到).这是一个例子:

(function (Kube) {
Kube.Assignment = function (element, options) {

    this.namespace = 'assignment';
    this.defaults = {
        //...
    };

    Kube.apply(this, arguments);

    this.start();
};

Kube.Assignment.prototype = {

    start: function () {
        //...
    }
};

Kube.Assignment.inherits(Kube.Distribution);

Kube.Plugin.create('Assignment');
Kube.Plugin.autoload('Assignment');

}(Kube));

不幸的是,Kube不被认可.

模块'imperavi-kube'通过纱线安装并通过进口

let Kube = require('imperavi-kube');

我收到以下错误: TypeError: Kube.Assignment.inherits is not a function

可能这不是Kube框架的问题,而是关于使用webpack处理JS插件的问题.

在Kube模块内部有一个用原型定义的"Kube"类.Prototype以.结尾window.Kube = Kube;

我的package.json看起来像:

{
  "name": "99-nodetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node --presets env app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "latest"
  }
}

我想运行的js脚本是app.js. 我无法使用节点app.js直接运行它,因为app.js包含新的语言语法.

因此,我必须按照上面定义的启动脚本,使用npm start通过babel运行它.没问题.

我的问题是如何直接在命令行中运行cmd,可以这样做吗？类似的东西:

npm run babel-node --presets env app.js

我想创建一个要导入Main.js文件的模块数组。我如何访问包含导入模块的对象？

编辑为了进一步解释，我将多个类导入到Main.js包含主类的文件中。这些类中的每一个都来自它们自己的单独文件，给我这样的导入语句：

import Header from './features/Header.js';
import ImageStrip from './features/ImageStrip.js';
import AreaChart from './features/AreaChart.js';
import Axes from './features/Axes.js';

是否有一个 JavaScript 对象包含导入的模块，例如类似的东西[ Header, ImageStrip, AreaChart, Axes ]？或者是否可以创建一个？

在不深入代码的情况下，我遇到了一个奇怪的情况，使用 ReactJS 的框架将根据其用例导入未知数量的文件。有时开发人员可能要导入 5 个文件，有时是 2 个......

因此，一个组件本质上是导入一堆文件，如下所示。有没有一种方法可以通过迭代所有文件来编写“从页面目录导入所有文件”的代码？我知道这可能是不可能的，因为 React 是一种非服务器端语言，但至少必须有更好的方法来导入它们......

旁注，正如所见，名称对导入并不重要

import one from '../pages/1_1';
import two from '../pages/2_1';
import three from '../pages/3_1';
import four from '../pages/4_1';
import five from '../pages/5_1';
import six from '../pages/6_1';
import seven from '../pages/7_1';
import eight from '../pages/8_1';

const Contents = [one,two,three,four,five,six,seven,eight];

export default Contents;

在我的react组件目录中,我在这里设置了index.js.

import App from './App';
import Main from './Main/Main';
import Best from './Main/Best';
import Club from './Main/Club';
import Post from './Main/Post';

import Sidebar from './Sidebar/Sidebar';

export { App, Main, Best, Club, Post, Sidebar };

用于其他js,

import {
    App,
    Main,
    Best,
    Club,
    Post,
    Sidebar
} from '../scripts/Containers/index';

但每当我制作这样的组件时,我是否应该在那里编写import/export语句index.js？有什么神奇的方式吗？

请帮我解决这个问题!

更新(使用@Bergi)

我修改了这样,效果很好.

export { default as App } from './App';

export { default as Header } from './Header/Header';

export { default as Main } from './Main/Main';
export { default as Best } …

在构建Vue应用程序时,我们在每个模板中重用某些Vue组件.我们的网格系统存在于.region,.layout,.grid,.column元素之外.所有这些都是独立的Vue组件(,...).

我们现在最终在每个模板中执行此操作:

import BlMain from '~components/frame/main/Main.vue'
import BlRegion from '~components/frame/region/Region.vue'
import BlLayout from '~components/frame/layout/Layout.vue'
import BlGrid from '~components/frame/grid/Grid.vue'
import BlColumn from '~components/frame/column/Column.vue'

有没有办法在项目中全局导入Vue组件？是否可以选择创建包含上述导入的组件Frame.vue并在每个模板中添加F​​rame组件？其他FE框架如何解决这个问题？

我们在Vue 上使用Nuxt JS.