webpack 使用Rollup构建Nx库不会绑定所需的依赖项

pgvzfuti 于 2023-10-19 发布在 Webpack

关注(0)|答案(1)|浏览(168)

提问

我正在使用default Rollup executor构建一个Nx库，稍后将在类似浏览器的环境中运行该库。结果束不能包含import % s或require % s。运行nx run ssr-bundle:build应该会创建一个包含应用程序代码和依赖项的bundle。
如何将所有代码捆绑在一起，使import艾德代码位于同一个文件中？

示例

源文件index.ts

import { isBoolean } from 'lodash';
async function handler() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(isBoolean);
    }, 1000);
  });
}
export default handler;

输出文件index.cjs.js

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var lodash = require('lodash'); <--------- this should be the lodash source code
async function handler() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(lodash.isBoolean);
    }, 1000);
  });
}
exports["default"] = handler;

webpack

来源：https://stackoverflow.com/questions/71130822/building-an-nx-lib-with-rollup-does-not-bundle-required-dependencies

1条答案

按热度按时间

eivgtgni1#

汇总：
multi-entry plugin
rollup.config.js

import multi from '@rollup/plugin-multi-entry';
export default {
  input: ['batman.js', 'robin.js', 'joker.js'],
  output: {
    dir: 'output'
  },
  plugins: [multi()]
};

Webpack：使用webpack并指定单个输出文件。
Webpack.js.js简单示例：

const path = require("path");
module.exports = {
  // Specify the entry point of your application
  entry: path.resolve(__dirname, "./src/index.tsx"),
  // Specify the output path and name
  output: {
    path: path.resolve(__dirname, "../build/"),
    filename: 'bundle.js',
  },
};

如果您有多个文件没有导入到入口点内，并且需要多个文件（或块），

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

如果你想要一个文件：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

阅读更多here

展开查看全部

赞(0）回复(0）举报 2023-10-19

我来回答

webpack 使用Rollup构建Nx库不会绑定所需的依赖项

提问

示例

1条答案

相关问题

热门标签

最新问答