Webpack可以正确处理require（）吗？

Question

我了解Webpack允许用户使用es6模块语法，AMD或commonJS导入和导出模块。但是，在处理webpack项目时，一个简单的require语句会引发错误。

这是在新创建的“ create-react-app”项目中。

config.js

const packageJson = require('../package.json');

const baseConfig = {
    urls: {
        base: packageJson.homepage,
        engineServer: 'localhost:3001'
    },
    useArrowKeysToCycleViews: false
};

const debugStyleConfig = {
    ...baseConfig,
    useArrowKeysToCycleViews: true
};

module.exports = { // <-- IMPORTANT
    config: debugStyleConfig
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App/App';
import * as serviceWorker from './serviceWorker';
import './boot'; // <-- IMPORTANT
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

boot.js

// The following line...
import { config } from './config';
// ... raises this error:
// Attempted import error: 'config' is not exported from './config'.

// If the following line is used instead...
// const { config } = require('./config');
// ...a different error is raised:
// TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

在试图理解该问题时，我创建了另一个项目，该项目使用了module.exports和require。但是，奇怪的是，下面的方法可以正常工作。

foo.js

function foo() {
    return 'fooz';
}

function bar() {
    return 'bar';
}

module.exports = {
    foo, bar
};

App.js

import React from 'react';
import './App.css';
const { foo, bar } = require('./foo');

function App() {
  return (
    <div className="App">
        <h1>{foo()}</h1>
        <h1>{bar()}</h1>
    </div>
  );
}

export default App;

将require和module.exports与webpack一起使用时是否会产生细微差别？

Answer 1

现在开始工作。问题出在config.js文件中。当我改变时：

const debugStyleConfig = {
    ...baseConfig,
    useArrowKeysToCycleViews: true
};

到

const debugStyleConfig = {
    useArrowKeysToCycleViews: true
};

...错误消失了。我相信这可能是nodeJS不支持Object.assign速记/对象散布运算符的结果。但是这样做而不是引发语法错误有点麻烦。