異步代碼分裂NPM模塊問題

我現在已經安裝一個本地包在我的主要應用package.json：

"contact-page": "file:local_modules/contact-page"

我有接觸模塊設置的package.json主要和腳本部分像這樣：

"main": "dist/main.js", 
"scripts": { 
    "build": "./node_modules/.bin/babel index.js --out-file ./dist/main.js", 
}

這可以確保在dist/main最後一行是exports.default = ContactPage;

所以在我的主應用程序動態導入，它具有：

getComponent() { 
    import('contact-page').then(ContactPage => { 
     console.log(ContactPage.default); 
    }); 
}

，我會在控制檯日誌undefined。

我的模塊必須在webpack中加載它的形狀。我第一次嘗試用webpack構建這個模塊，但無濟於事......

來源

2017-06-21 Callum Linington

你試過「System.import（‘聯繫方式頁’）」。我無法跟上規範。 webpack是否構建了多個包文件？你在控制檯中看到AJAX呼叫嗎？ –

'System.import'已被放棄以支持'import（）'。我沒有看到與我有關的AJAX調用 - 或者另一個包文件..... –

不知何故，我設法解決這個問題....不知道如何。

但是，我添加了一個tools/build.js文件，其中包含：

const fs = require('fs'); 
const execSync = require('child_process').execSync; 

const exec = (command, extraEnv) => 
    execSync(command, { 
     stdio: 'inherit', 
     env: Object.assign({}, process.env, extraEnv) 
    }); 

console.log('Building CommonJS modules ...'); 

exec('babel modules/index.js --out-file dist/main.js', { 
    BABEL_ENV: 'cjs' 
}); 

console.log('\nBuilding main.js ...'); 

exec('webpack modules/index.js umd/main.js', { 
    NODE_ENV: 'production' 
});

從借來的反應路由器。

然後只是跑node tools/build.js它創建了這兩個文件。然後我刪除了node_modules/contact-page以便做另一個npm install。它只是工作.....哦，我也改變了我的WebPack配置到：

const webpack = require('webpack'); 

module.exports = { 
    output: { 
     library: 'ContactPage', 
     libraryTarget: 'umd' 
    }, 

    externals: { 
     react: { 
      root: 'React', 
      commonjs2: 'react', 
      commonjs: 'react', 
      amd: 'react' 
     } 
    }, 

    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } 
     ] 
    }, 

    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
     }) 
    ] 
};

再次，從借來的反應路由器

來源

2017-06-21 14:55:36

異步代碼分裂NPM模塊問題

回答

相關問題