如何正确地将 ES6 模块函数导出为库以在节点应用程序中使用？答案

【问题标题】：How to properly export an ES6 module function as a library for use in a node app?如何正确地将 ES6 模块函数导出为库以在节点应用程序中使用？
【发布时间】：2018-05-18 16:21:03
【问题描述】：

假设我有一个 node.js 应用程序，它不通过我的 webpack 捆绑：

节点应用

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

这是我的 ES6/JSX 文件，它正在由 webpack 处理，我希望能够在我的节点应用程序中访问该渲染功能（你猜对了，我正在尝试 SSR 反应东西；））

src/Html.js -(webpack)-> 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”以及随后的渲染函数。如果我将我的节点应用程序包含在包中，一切都会好起来的，但这不是我想要做的。

【问题讨论】：

我认为您需要在 webpack 配置中使用 libraryTarget 来定义您将如何公开捆绑包
libraryTarget 的一个特定选项起到了作用。谢谢。我将在下面详细发布解决方案

标签： javascript node.js webpack es6-modules

【解决方案1】：

按照 apokryfos 的建议，我尝试了 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 文件中

【讨论】：