Как правильно экспортировать функцию модуля ES6 как библиотеку для использования в приложении узла? - PullRequest
0 голосов
/ 18 мая 2018

Допустим, у меня есть приложение node.js, которое НЕ проходит через мой пакет веб-пакетов:

Приложение Node

const  Html = require('./build/ssr-bundle.js');
let result = Html.ssrbundle.render();
console.log(result);

Вот мой файл ES6 / JSX, который обрабатывается веб-пакетом, и я хочу иметь возможность получить доступ к этой функции рендеринга в моем приложении узла (как вы уже догадались, я пытаюсь что-то отреагировать на SSR;))

src / Html.js - (веб-пакет) -> build / ssr-bundle.js

import React from 'react';
import  ReactDOMServer from 'react-dom/server';
import  CustomComponent from './custom-component.js';


module.exports = {
     render : function () {
         return ReactDOMServer.renderToString(<CustomComponent />);
     } };

А вот мой конфиг Webpack

webpack.config.js

 var path = require('path');
 module.exports = {
     entry: {
         ssr: './src/Html.js',
         //frontend: './src/frontend-Html.js'
     },
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'ssr-bundle.js',
             library: 'ssrbundle'
     },
     module: {
         rules: [
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 query: {
                     presets: ['env','react'],
                     plugins: ["transform-es2015-destructuring", "transform-object-rest-spread"]
                 }
             },
             {
                 test:/\.css$/,
                 use:['style-loader','css-loader']
             }
         ]
     },
     stats: {
         colors: true
     },
     devtool: 'source-map'
 };

Что бы я ни делал, я не могу понять, как правильно использовать эту экспортированную переменную "ssrbundle" и впоследствиифункция рендеринга.Если бы в комплект поставки входило мое нодовое приложение, все было бы в порядке, но я не хочу этого делать.

1 Ответ

0 голосов
/ 19 мая 2018

Как подсказал апокриф, я поиграл с настройкой libraryTarget Webpack.Вы можете найти больше информации об использовании Webpack для создания библиотеки (чего я действительно хотел добиться) здесь:

https://webpack.js.org/guides/author-libraries/

и вот примеры кода:

https://github.com/kalcifer/webpack-library-example/blob/master/webpack.config.babel.js.

Что для меня помогло, так это установить для libraryTarget значение «umd», которое отличается от параметра «var», установленного по умолчанию и подходящего, т.е. для включения сценария вHTML-файл

...