javascript - 如何正确地将 ES6 模块函数导出为库以在节点应用程序中使用?
问题描述
假设我有一个 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”以及随后的渲染函数。如果我将我的节点应用程序包含在包中,一切都会好起来的,但这不是我想要做的。
解决方案
正如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 文件中
推荐阅读
- sql - 如何根据另一个表中的日期范围获取记录
- fullcalendar - Fullcalendar 自定义视图点击事件
- java - 我应该在哪里运行自定义 SQL 以在 Spring Boot 中的数据库中创建枚举类型?
- node.js - Heroku 上的 PayloadTooLargeError,但仅在使用移动设备时
- python - Tkinter:在 GUI 中跳过 PDF
- javascript - 抓取网页数据
- sorting - 给定要在 O(n) 中解决的问题,但接受使用 sort() 的解决方案
- flutter - 如何在颤动中为PNG设置轮廓边框?
- javascript - 重新排序的数组未显示在网络中 - react-beautiful-dnd
- flutter - Flutter List View Builder 使用 API