React 中的动态导入

Question

我正在尝试通过 process.env.NODE_ENV 导入文件的动态，以在生产或开发中导入样式表或另一个样式表。我已经设定了加载它的条件，但它给了我一个错误 Error in ./src/index.js 语法错误：'import' 和 'export' 可能只出现在顶层 (13:4) 我猜这是不正确的，但是......我该怎么做？我使用 create-react-app

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './components/App';

import routes from './routes';
import configureStore from './store/configureStore';
import initialState from './reducers/initialState';

if (process.env.NODE_ENV === 'production') {
    import './styles/index.css';
}else {
    import './styles/index.scss';
}
const store = configureStore(initialState);

ReactDOM.render(
   <Provider store={store}>
       <App />
   </Provider>,
   document.getElementById('root') 
);

谢谢！！！

Answer 1

正如老金在 cmets 中提到的，在这种情况下，您需要使用 require。

例如，下面是我如何根据NODE_ENV 配置对 Redux 存储的访问权限，可以根据您的需要进行调整：

const INITIAL_STATE = {};

function getStore () {
    const configureStore = process.env.NODE_ENV === 'production'
        ? require('./configure-store.prod').default
        : require('./configure-store.dev').default;
    return configureStore(INITIAL_STATE);
}

export default getStore();