Реэкспорт связанного React для других пакетов Webpack - PullRequest
Новая
       1

Реэкспорт связанного React для других пакетов Webpack

0 голосов
/ 02 апреля 2019

В моем реальном приложении у меня есть пакет Webpack, который включает в себя основное приложение Javascript и несколько зависимостей.Кроме того, у меня есть несколько дополнительных пакетов Webpack с кодом Javascript, которые используют те же зависимости, что и основной пакет Webpack.Как я могу реэкспортировать пакетные зависимости из моего основного пакета Webpack для других пакетов?

Минимальный пример проекта

Загрузить

Мое приложение

myapp / index.html 

<html>
<body>
    <div id="root"></div>
    <div id="optional"></div>
    <script src="./dist/bundle.js"></script>
    <script src="../mylib/dist/bundle.js"></script>
</body>
</html>

myapp / app.js 

import * as React from "react";
import * as ReactDOM from "react-dom";

ReactDOM.render(React.createElement("h1", null, "Hello from App!"), document.getElementById("root"));
console.log("My application is loaded");

myapp/package.json

{
    "name": "myapp",
    "private": true,
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    },
    "devDependencies": {
        "webpack": "^14.29.6",
        "webpack-cli": "^3.3.0"
    }
}

myapp / webpack.config.js 

module.exports = {
    entry: './app.js',
    output: { filename: 'bundle.js' }
};

Моя дополнительная библиотека

mylib / lib.js 

import * as React from "react";
import * as ReactDOM from "react-dom";

ReactDOM.render(React.createElement("h1", null, "Hello from Library!"), document.getElementById("optional"));
console.log("My optional library is loaded");

mylib / package.json 

{
    "name": "mylib",
    "private": true,
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    },
    "devDependencies": {
        "webpack": "^14.29.6",
        "webpack-cli": "^3.3.0"
    }
}

mylib / webpack.config.js 

module.exports = {
    entry: './lib.js',
    output: { filename: 'bundle.js' },
    externals: { 'react': 'React', 'react-dom': 'ReactDOM' }
};

Когда я открываю myapp/index.htmlЯ получаю Uncaught ReferenceError: React is not defined из библиотеки.Однако само приложение работает и печатает Hello from App!

1 Ответ

0 голосов
/ 03 апреля 2019

Наконец, я нашел решение, используя DllPlugin и DllReferencePlugin .

Мои изменения:

myapp /index.html 

<html>
<body>
    <div id="root"></div>
    <div id="optional"></div>
    <script src="./dist/vendor.js"></script>
    <script src="./dist/bundle.js"></script>
    <script src="../mylib/dist/bundle.js"></script>
</body>
</html>

mylib / webpack.config.js 

const path = require('path')
const webpack = require('webpack')

module.exports = [
    {
        name: 'vendor',
        entry: ['react', 'react-dom'],
        output: { filename: 'vendor.js', library: 'vendor' },
        plugins: [new webpack.DllPlugin({ name: 'vendor', path: path.resolve(__dirname, 'dist/manifest.json') })]
    },
    {
        entry: './app.js',
        output: { filename: 'bundle.js' },
        dependencies: ['vendor'],
        plugins: [new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, 'dist/manifest.json') })]
    }
];

mylib / webpack.config.js 

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './lib.js',
    output: { filename: 'bundle.js' },
    plugins: [new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, '../myapp/dist/manifest.json'), name: 'vendor' })]
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...