我是在写一个基于Ruby Sinatra后端的React应用程序。 main.js文件呈现应用程序:
import React from 'react';
import ReactDOM from 'react-dom';
import Galery from './components/Galery'
ReactDOM.render(
<Galery />,
document.getElementById('app')
);
我以前在一个文件中包含了所有组件,但是想将它们拆分成单独的文件。如果我在每个父组件文件中导入子组件,我只能设法运行,如Galery.js中的那样:
import React, { Component } from 'react';
import Image from 'Image'
class Galery extends Component {
...
<Image ... />
...
}
是否可以避免显式导入所需的组件,而是将它们加载到main.js文件中?在每个文件中导入Component模块也没关系。
这是我的webpack配置:
module.exports = {
entry: './react/main.js',
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
alias: {
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
},
test: /\.js$/,
exclude: /(node_modules|bower_components)/
}
]
}
};
答案 0 :(得分:1)
简短回答:
强烈建议您在需要的地方使用显式导入,因为webpack
等工具可以通过删除未使用的函数来对包大小进行智能优化。记住这一点,最简单的答案是:你使用webpack + babel + React的方式,不可能避免为每个文件定义imports
。
更长的答案:
是的,你可以做到,但这不是直截了当的。与Ruby不同,常量/变量查找在JavaScript中的工作方式不同。在Ruby中,以下工作正常:
# a.rb
A = 10
# b.rb
require "./a.rb"
puts a # => 10
这是因为当解析文件a.rb
并将其包含到b.rb
中时,在Ruby中没有创建额外的子命名空间。所有顶级单元都存在,就好像它们是在b.rb
内定义的一样。 More on this
为了将其与JS进行比较,我需要澄清一下模块包含的工作方式。到目前为止,情况非常复杂。让我们先考虑NodeJS。在这个非浏览器环境中,还没有实现import
功能,除了带有额外标志的最新版本(截至今天为v 9)。因此,当您使用webpack
和import
之类的内容时,内部发生的是这些转换为webpack自己的require
垫片。 import
和require
转换的方式略有不同,因为前者是“静态”样式加载器,而后者是动态样式加载器。在非常基本的层面上,这意味着import
语句应位于文件的顶部,require
语句可以位于任何位置,并且当解释器遇到该行时会发生文件解析。这将产生奇怪的效果,如下所示。
NodeJS require
的工作方式是从包含的文件中识别module.exports
对象。该对象指定哪些函数/对象在外部公开。因此,与Ruby不同,module.exports
已经存在隐式本地命名空间(或者如果您愿意,则可以分组),而不是全局$LOADED_FEATURES
:
// a.js
const a = 10;
module.exports = { a: a };
// b.js
const a = require('./a.js');
console.log(a); // { a: 10 };
解决这个问题的一种方法是全局变量。就像Ruby一样,JavaScript有一个隐式的全局命名空间 - 特别是在浏览器中通过window
和NodeJS中的global
更常见。一个想法如下:
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Image from 'components/image.js';
import Gallery from 'components/gallery.js';
window.React = React;
window.ReactDOM = ReactDOM;
window.Image = Image;
window.Gallery = Gallery;
// gallery.js
export default class Gallery extends React.Component {
render() {
return <Image />;
}
}
然而,这不起作用。为了模拟实际的ES6 import
功能 - 这是一组静态定义的文件和函数,webpack尝试通过webpack自己的require
函数来模拟它们。并且这不会使导入完成时全局附加的常量可用。因此,为了使这项工作,一个解决方法是使用旧的require
样式加载,这将改变webpack自己的require
函数的工作方式。通过将上述内容更改为:
// main.js
const React = require('react');
const ReactDOM = require('react-dom');
window.React = React;
window.ReactDOM = ReactDOM;
const Image = require('components/image.js').default;
const Gallery = require('components/gallery.js').default;
window.Image = Image;
window.Gallery = Gallery;
// gallery.js
export default class Gallery extends React.Component {
render() {
return <Image />;
}
}
正如您所看到的,这对于运行JavaScript应用程序来说太过分了。但主要的问题是webpack不能进行任何智能优化,因为它不知道你没有使用哪些功能。所以最好避免这么做。