非同期コード分割NPMモジュールの問題に

以前の私は、私は私のメインのアプリpackage.jsonでセットアップローカルパッケージを今持っているthis question 非同期コード分割NPMモジュールの問題に

を尋ねました以下のようなので：これは確認します

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

dist/mainの最後の行はです

だからメインのアプリで私の動的な読み込みで、それが持っている：私はちょうどコンソールログにundefinedを取得

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

。

ウェブパックをロードするには、モジュールがどのような形状でなければなりません。私は最初にこのモジュールをビルドしてWebpackを試したが、役に立たなかった。

出典

2017-06-21 Callum Linington

を反応から借り、再び

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

あなたは「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を実行して、これら2つのファイルを作成しました。その後、別のnpm installを実行するためにnode_modules/contact-pageを削除しました。それだけでああ、私もに私のWebPACKの設定を変更し.....働いて：ルータ

出典

2017-06-21 14:55:36

非同期コード分割NPMモジュールの問題に

答えて

関連する問題