异步代码拆分 NPM 模块问题答案

【问题标题】：Async Code Splitting NPM module issues异步代码拆分 NPM 模块问题
【发布时间】：2017-06-21 13:10:04
【问题描述】：

我现在已经在我的主应用 package.json 中设置了一个本地包：

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

我已经为联系人模块设置了package.jsonmain 和脚本部分，如下所示：

"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 构建这个模块，但无济于事......

【问题讨论】：

您是否尝试过“System.import('contact-page')”。我跟不上规范。 webpack 是否构建多个捆绑文件？您在控制台中看到 AJAX 调用了吗？
System.import 已弃用 import()。我没有看到与我有关的 AJAX 调用 - 或其他捆绑文件.....

标签： javascript reactjs webpack babeljs

【解决方案1】：

不知怎的，我设法解决了这个问题....不确定如何。

但是，我添加了一个 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')
        })
    ]
};

再次，借用 react 路由器

【讨论】：