Question

我现在在主应用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构建此模块，但无济于事......

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

再次，借用反应路由器

异步代码拆分NPM模块问题

1 个答案: