我反复收到此消息,我试图将d3.js包含在我的分发文件中.

将'd3.js'视为外部依赖

我试过使用这个插件

import includePaths from 'rollup-plugin-includepaths';

var includePathOptions = {
  paths: ['node_modules/d3/d3.min.js'],
  include: {
    d3: 'd3'
  },
};

我错过了什么？

我目前正在使用Rollup和PostCSS。如何定位我想要处理的特定 scss 文件，而不必使用 @import 'source/scss/main.scss' in mysource/js/entry.js`

例如做类似的事情......

// rollup.config.js
...
postcss({
        from: 'source/scss/main.scss'
        minimize: true,
        sourceMap: true, 
        extract : 'build/css/main.css'
    }),
...

而不是在 source/js/entry.js

//source/js/entry.js
import  '../scss/main.scss'; // don't want to import SCSS from within JS file

import { someJSmodule } from './someJSmodule.js';
import { anotherJSmodule } from './anotherJSmodule.js';

这是我的当前 rollup.config.js

// rollup.config.js
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import copy from 'rollup-plugin-copy';
import postcss from 'rollup-plugin-postcss';


export …

我创建了一个 UI JS 库，package.json很好，我将它捆绑在一起webpack，并且它在其中工作得很好npm（在node_modules/library目录中保持得很好）。

但是，我想通过配置文件来配置一些东西。假设我的库有一个BoxReact 组件（它渲染 100x100 的正方形并带有背景色）：

// Box.js
export default function(props) {
   return <div style={{
       backgroundColor: props.color,
       width: "100px",
       height: "100px"
   }}>
       {props.children}
   </div>;
}

我想提供添加配置文件的可能性，以便背景颜色默认为用户选择的颜色。

因此，我的库的用户在他的项目的根目录中创建了一个配置文件（我们称之为library.config.js），该文件具有如下内容：

// library.config.js
const BoxBackgroundColor = 'green';
export { BoxBackgroundColor }

如果这个文件存在，lib 就知道这一点，用户可以简单地使用Box如下：

<Box />

并且color道具将是绿色的。

如何实现这样的目标？

问题是，当我捆绑我的库时，我不知道library.config.js文件是否存在。此信息可供用户项目中我的图书馆的用户使用。看来我想解决import我的require库中除. library.config.js此异常require应在用户的项目捆绑阶段（当library.config.js文件可用时）解决。

这是我第一次尝试理解/使用汇总。

我正在使用这个样板，因为它全部基于我也喜欢使用的 Three.js。

到目前为止，我当前的（几乎肯定是错误的）方法是：

1. 从 github 下载样板项目

2. 首先，我想了解需要将项目的哪些部分推送到我的网站才能使其“按原样”运行。我成功地做到了这一点，并且可以在我的网站子域之一上看到该项目。

3. 现在我尝试在本地设置我的生产环境。我制作了 github 下载的副本，然后运行npm install​​- 这引入了我的 node_modules 文件夹并下载了所有依赖项。我在全球范围内安装了 rollup。

4. 接下来我运行rollup watch- 希望它能够持续更新我的构建文件。这是我收到错误的时候：

Error: Could not resolve entry module (watch).
        at error (C:\Users\Shadow\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:213:30)
        at ModuleLoader.loadEntryModule (C:\Users\Shadow\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:17642:16)
        at async Promise.all (index 0)

Run Code Online (Sandbox Code Playgroud)

我的配置文件如下所示：

import resolve from '@rollup/plugin-node-resolve'; // locate and bundle dependencies in node_modules (mandatory)
import { terser } from "rollup-plugin-terser"; // code minification (optional)

export default {
    input: 'src/main.js',
    output: [
        {
            format: 'umd',
            name: 'LIB',
            file: 'build/main.js' …

I tried to create a shared component using a storybook with react-redux. I am using rollup to create a shared component. due to some error unable to create the shared component. package.json

{
  "name": "story1",
  "version": "0.1.0",
  "private": false,
  "main": "./build/index.js",
  "module": "./build/index.es.js",
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "rollup": "2.30",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": …

我需要构建一个js可以用作Service Worker的单个容器。

我有一个包含两个@nrwl/web:lib包的 nrwl 工作区，一个是common，另一个是worker. 该worker包使用common通过import { stuff } from @my/common.

但是，使用library项目类型rollup时，worker.umd.js不包含common依赖项，因此我需要两者common.umd.js，并且worker.umd.js必须在用作 Service Worker 之前手动连接它们。

使用withapplication项目类型，它也捆绑了依赖项，而且还生成其他 js 文件，例如等。为此，我使用了with ，因为 with无法发布。webpackcommonvendor.jspolyfills.js@nrwl/angular@nrwl/web:application

有更好的方法吗？我应该使用其他 nrwl 插件吗？angular如果可能的话，我想避免使用react它，但如果需要的话，我会使用它。或者我应该以某种方式自定义rollup或webpack配置？或者创建我自己的插件？

I\xe2\x80\x99m 构建要在 NPM 上发布的 TypeScript 包。我\xe2\x80\x99将在未来可能使用Vite的Web开发项目中使用这个包。当我用这个模块构建未来的网站时，它\xe2\x80\x99s是否已经捆绑有关系吗？无论NPM上的代码是否被捆绑（如在lib.esm.js文件中），Won\xe2\x80\x99t Rollup（Vite用于构建网站）都会捆绑代码吗？为什么不直接使用 TSC（TypeScript 编译器）将 TS 编译为 NPM 的 JS，然后让使用项目（无论是 Rollup、Webpack 还是 Parcel）将其捆绑起来以针对浏览器进行优化？

我错过了什么其他 NPM 作者知道的事情？

请注意，我\xe2\x80\x99m将此包严格编写为ESM模块（类型：模块），因此我\xe2\x80\x99m不担心CJS。

使用vite js捆绑我的库，我需要同时提供两个版本：

• 生产用途
• 通过 devtools 集成开发特定代码和警告。

当我使用 webpack 时，我有：

module.exports = [
  defaultUmdBuild("production"),
  defaultUmdBuild("development"),
];

它输出两个文件，然后我的库有这个入口点：

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./mylib.production.js');
} else {
  module.exports = require('./mylib.development.js');
}

如何使用 vite 做同样的事情？

谢谢。

问题

我使用默认的 Rollup 执行器来构建一个 Nx 库，稍后我将在类似浏览器的环境中运行该库。生成的包不能包含imports 或requires。运行nx run ssr-bundle:build应该创建一个包含我的应用程序代码和依赖项的单个包。

如何捆绑我的所有代码，以便我的imported 代码位于同一个文件中？

例子

源文件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) => …

我现在正在尝试创建我的第一个 npm 包。我正在使用 rollup 并使用 npm 链接在另一个 create-react-app 中测试它。

我想在组件的文本上使用某种谷歌字体，但似乎将其导入到包文件中还不够，而且只有在我的测试应用程序中导入该字体时它才有效。

我的 npm 包的样式组件中的 css：

export const Text = styled.div`
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');

    display: flex;
    flex-direction: column;
    text-align: left;
    color: #0e1c48;
    overflow: hidden;
    font-family: 'DM Sans', 'Roboto', Tahoma, sans-serif;
`;

仅当我在测试应用程序的 index.html 中包含这些链接标记时才有效：

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
    </head>
</html>

包的 rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';
import image from …