React中的動態導入

我試圖通過process.env.NODE_ENV導入文件的動態導入樣式表或另一個在生產或開發中。語法錯誤：'import'和'export'可能只出現在頂層（13：4）。我想這是錯誤的。不正確，但...我該怎麼辦？我用create-react-appReact中的動態導入

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') 
);

謝謝!!!

來源

2017-08-17 jmrosdev

使用'要求（」 ./風格/ index.scss'） '？ :)但也許這是更多的東西，應該由您的構建/ CI而不是由代碼決定？ – Laoujin

另一種方法是'導入'./styles';'然後將擴展處理從'.css'更改爲'.scss'，以用於生產或開發，或者爲其生成別名並根據環境更改別名。我個人儘量避免在應用程序代碼中這樣分支，因爲這表明它是構建邏輯的問題，而不是應用程序邏輯。從長遠來看，在同一個文件中使用'require'和'import'將不起作用。 – loganfsmyth

正如老金在評論中提到的，在這種情況下您需要使用require。

例如，這裏是我如何配置獲取我的終極版店的基礎上，NODE_ENV，這可能會進行調整，以滿足您的需求：

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();

來源

2017-08-17 16:37:50 lux

會+5，如果我可以 - 謝謝:) – danday74

只需保存我的一整天！非常感謝！使用'create-react-app'，您可以通過從'../data/ coming- soon.json'導入FakeData_MoviesComingSoon來導入文件;''，你永遠無法分離_production_/_！== production_和（因爲你！;-)）'FakeData：process.env.NODE_ENV！=='production'？ require（'../ data/coming-soon.json'）：'''只允許我在開發時導入BIG數據文件。 TX！ TX！ TX！ TX！只需將我的應用程序從750k減少到131k！ –

React中的動態導入

回答

相關問題