异步代码分裂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模块问题

回答

相关问题