标签: rollup

我有一个简单的查询:

WITH data(val1, val2, val3) AS
     ( SELECT 'a' ,'a-details' ,'1' FROM DUAL
     UNION ALL
     SELECT 'b' ,'b-details' ,'2' FROM DUAL
     UNION ALL
     SELECT 'c' ,'c-details' ,'3' FROM DUAL
     )
SELECT NVL(val1,'Total Result'),
     val2,
     SUM(val3) tot
from data
group by rollup(val1, val2);

我得到一个输出:

VAL1                             VAL2                                    TOT
-------------------------------- -------------------------------- ----------
a                                a-details                                 1 
a                                                                          1 
b                                b-details                                 2 
b                                                                          2 
c                                c-details                                 3 
c                                                                          3 
Total Result                                                               6 

但我需要一个输出,如:

VAL1                             VAL2                                    TOT
-------------------------------- -------------------------------- ----------
a                                a-details                                 1 
b                                b-details                                 2 …

我正在尝试使用汇总 js 来构建我的打字稿项目，但我不知道如何生成定义文件以及如何将它们自动包含在 dist 文件中。

有谁知道怎么做？

这是我的 rollup.config.js

import typescript from "rollup-plugin-typescript";
import handlebars from "rollup-plugin-handlebars";
import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/generator.ts',
  format: 'cjs',
  plugins: [
    typescript(),
    handlebars(),
    babel()
  ],
  dest: 'dist/bundle.js'
};

我正在使用默认的 ts 配置，但这与声明 = true 相同。

编辑 ：

还尝试使用 Webpack ：

    module.exports = {
      context: __dirname + '/src',
      entry: {
        index: './generator'
      },
      output: {
        path: __dirname + '/build',
        publicPath: '/',
        filename: 'generator.js'
      },
      resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js']
      },
      module: …

我遇到过一种情况，我通过汇总捆绑多个文件，文档中提供了这样的示例cli。

我导出一组捆绑包，如下所示：

export default [
    {
        input: 'packages/A/index.js',
        output: {
            name: '[name]Bundle',
            file: '[name].umd.js',
            format: 'umd'
        }
    },
    {
        input: 'packages/B/index.js',
        output: {
            name: '[name]Bundle',
            file: '[name].umd.js',
            format: 'umd'
        }
    }
];

然后我有一个函数可以为每个包添加一个通用配置（想想插件），比如：

import path from "path";

import alias from '@rollup/plugin-alias';
import resolve from '@rollup/plugin-node-resolve';


const augment = configs => {

    const generateAlias = (symbol, location) => {
        return {
            find: symbol,
            replacement: path.resolve(process.cwd(), location)
        };
    }

    const entries = [
        generateAlias("@", "src/"),
        generateAlias("~", "src/assets/scss/"),
        generateAlias("#", "src/assets/img/"), …

我想react-admin在一个项目中使用，snowpack但遇到以下错误

? snowpack failed to load node_modules/ra-core/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js
  'default' is not exported by node_modules/@sheerun/mutationobserver-shim/dist/mutationobserver.min.js, imported by node_modules/ra-core/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js

我不确定这是一个错误react-admin还是它的依赖项之一，它可能可以通过更改配置来解决snowpack.config.json

繁殖步骤

使用Create Snowpack App初始化一个 Snowpack 项目

npx create-snowpack-app new-dir --template @snowpack/app-template-react --use-yarn

添加包 react-admin

yarn add `react-admin`

添加以下行 src/index.jsx

import { Admin } from 'react-admin'

运行命令以启动应用程序

npm start

会有一堆警告，如：

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

Conflicting namespaces: node_modules/ra-core/esm/i18n/index.js re-exports 'TranslationContext' from …

我正在寻找一种简单的方法来设置环境。IE 如果我可以运行npm run dev:local并npm run dev:staging加载不同的环境文件，这些文件可以在运行时通过process.env. 据了解，它是编译的，因此我可能必须以不同的方式访问变量。我直接从 sveltejs/template 使用 svelte 和 rollup。这应该很简单，但我看不出有什么办法。虽然很麻烦，但是用 webpack 可以做到。有没有一种简单的方法可以做到这一点？

我正在尝试将 Storybook 与 Svelte 组件库一起使用。Svelte 设置为使用 Rollup。我想知道 Storybook 对 Webpack 的使用是否与我的问题有关？

• 只要我的 svelte 组件是用 JS 编写的，Storybook 就可以正常工作
• Svelte 已设置为可以与 TS 配合使用
• 即使在组件的脚本中添加一个简单的类型声明也会破坏 Storybook

例子：

我改变了这个：

<script lang="ts">
  export let text = ''
  export let sent = true
</script>

对此：

<script lang="ts">
  export let text: string
  export let sent: boolean
</script>

我收到此错误：

Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Unexpected token (2:17)
1: <script lang="ts">
2:   export let text: string
                    ^

我现在正在尝试创建我的第一个 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 …

我正在尝试将 Vite 与动态导入Vue SFC一起使用，但它不适用于生产构建。

有 stackblitz 的例子：

https://stackblitz.com/edit/vitejs-vite-ant1g2?file=src/main.ts

测试命令和 localhost:3000 显示良好。

vite

但是预览和 localhost:4173 显示空白。

vite build && vite preview

怎么了？你有什么解决办法？

我的项目的设置是tsdx（基于Rollup和Typescript）。
在我的 IDE (vscode) 中工作一切看起来都很好，甚至运行也yarn tsc没有错误。

当我运行时yarn build（即tsdx build），我收到以下错误：

(typescript) Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.

错误中引用的代码是：

(typescript) …

当我在汇总中使用 Scss 时，当我构建项目时出现错误：

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
components/styles/index.scss (3:0)
1: @import 'variables';

我尝试了一些方法但没有成功，例如rollup-plugin-postcss或rollup-plugin-scss。我改为sass，node-sass但出现了另一个问题，因为我使用了类似的语法$spacer / 2。

这是我的 package.json

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
components/styles/index.scss (3:0)
1: @import 'variables';

这是index.scss

  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.1",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": …