标签: rollupjs
Rollup.js未解析的依赖项
我试图将rollup.js合并到一个项目中.目前我在控制台(未解析的依赖项)中收到下面提供的警告,我不知道为什么或如何解决它:
'fs' is imported by node_modules\filereader\FileReader.js, but could not be resolved – treating it as an external dependency
'fs' is imported by commonjs-external:fs, but could not be resolved – treating it as an external dependency
preferring built-in module 'punycode' over local alternative at 'C:\Users\Ryan\OneDrive\Projects\Custom Coding\Zapier\Ryan Test\node_modules\punycode\punycode.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
preferring built-in module 'punycode' over local alternative at 'C:\Users\Ryan\OneDrive\Projects\Custom Coding\Zapier\Ryan Test\node_modules\punycode\punycode.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: …推荐指数
解决办法
查看次数
rollup.JS和"'this'关键字相当于'undefined'
我正在尝试使用Rollup.js捆绑Angular2模块.这是我的rollup.config.vendor.js文件:
import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
entry: 'vendor.ts',
dest: './Bundle/vendor.js',
format: 'iife',
moduleName: 'vendor',
plugins: [
typescript(),
resolve({
jsnext: true,
main: true,
browser: true
}),
commonjs({
include: 'node_modules/rxjs/**',
}),
]
}
它创建了一个捆绑的js,但在这个过程中它会不断打印这种消息:
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
node_modules\@angular\forms\@angular\forms.es5.js (1:25)
1: var __extends = (this && this.__extends) || function (d, b) {
^
2: for (var …推荐指数
解决办法
查看次数
Rollup 是否可以保留文件和文件夹结构？
我正在使用 ES6 导入并使用 Rollup 对其进行转译。
输出是单个捆绑文件。
Rollup 可以配置为生成文件到文件的转译结果吗？
这是我正在使用的当前配置，它显然会输出一个文件。
gulp.task('rollup', function() {
const rollup = require('rollup');
const nodeResolve = require('rollup-plugin-node-resolve');
const JS_INDEX_FILE = 'src/index.js';
return rollup.rollup({
input: JS_INDEX_FILE,
plugins: [
nodeResolve({
browser: true
})
]
}).then(bundle => {
bundle.write({
sourcemap: true,
format: 'cjs',
strict: true,
file: 'bundle.js'
});
});
});
基本上，我想要单个文件而require()不是import.
推荐指数
解决办法
查看次数
如何将typescript npm模块导入语法转换为ECMA2015模块导入语法
我正在尝试在Typescript项目中使用第三方库(特别是三个).作为概念验证,我正在尝试将所有客户端代码解析为模块(无需转换为ES5或捆绑).
我的项目设置如下:
cgi/app.js (compiled typescript file)
node_modules/@types
node_modules/three/build/three.module.js
src/app.ts
index.html
tsconfig.json
package.json
在我的 index.html
<head>
<script type="module" src="node_modules/three/build/three.module.js"></script>
<script type="module" src="cgi/app.js"></script>
</head>
我正在尝试使用typescript解析three.module.js文件,同时还使用来自的类型声明@types/three.通常,您可以使用以下内容导入库:import { Scene } from 'three'这为我提供了类型支持,但编译后的模块没有正确的ES6语法.它需要import { Scene } from './path/to/three.js.
不幸的是,typescript 不支持自动执行此操作.我可以直接导入ES6模块(不使用@types)但是我失去了类型支持.
postcriptcript编译,是否可以将模块分辨率从节点语法转换为ES6语法？(例如import { Scene } from 'three'转换为import { Scene } from './three.js'？
具体来说,是否可以利用汇总来实现这一目标？
推荐指数
解决办法
查看次数
如何捆绑反应应用程序与汇总
我正在寻找rollup配置的帮助来构建最简单的反应应用程序.
目前我的捆绑的js文件并没有真正捆绑任何依赖关系,看起来很裸露.
我的汇总配置:
import babel from 'rollup-plugin-babel';
import filesize from 'rollup-plugin-filesize';
import nodeResolve from 'rollup-plugin-node-resolve';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
export default {
input: 'src/index.js',
output: [
{
file: 'dist/index.js',
format: 'umd',
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'styletron-react-core': 'StyletronReactCore',
},
sourcemap: 'inline',
},
],
external: ['react', 'react-dom', 'styletron-react-core'],
plugins: [
progress(),
nodeResolve({
browser: true,
}),
json(),
babel({
babelrc: false,
presets: [['es2015', { modules: …推荐指数
解决办法
查看次数
如何用数据 URI 替换汇总 CSS 中的 url(...)？
使用 rollup 和 postcss 插件，我可以将 CSS 注入到我的包中。但是，我的 CSS 引用了一些图像文件，例如background-image: url(./images/my-image.svg);.
如何配置 postcss/rollup 以url(...)用数据 URI替换 CSS 实例，从而将SVG嵌入到包中？
推荐指数
解决办法
查看次数
使用Material UI会导致无效的挂接调用警告
我正在尝试将create-react-library捆绑为可重用的库。我正在尝试的想法是创建可组合的组件库，以供我们在Web应用程序和电子应用程序中使用。
在我们的package.json文件中，我们具有以下要求
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0"
},
"devDependencies": {
"@material-ui/core": "^4.0.0-alpha.4",
....
"react": "^16.4.1",
"react-dom": "^16.4.1",
}
导入Material UI组件时，将导致错误
挂钩只能在功能组件的主体内部调用。https://reactjs.org/warnings/invalid-hook-call-warning.html
这是完整的组件（这只是我慢慢扩展的create-react-library中的示例）
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from "@material-ui/core";
import styles from './styles.css'
class ExampleComponent extends Component {
static propTypes = {
text: PropTypes.string
}
render() {
const { text } = this.props
return (
<div className="">
<Button></Button>
Example Component: {text}
</div> …推荐指数
解决办法
查看次数
如何解决（插件 postcss）错误：找不到要导入的文件或无法读取：smui-theme. Material UI Svelte 项目
我正在将Material UI集成到 Svelte 项目中。
!] (plugin postcss) Error: File to import not found or unreadable: smui-theme.
node_modules/@smui/tab/_index.scss
Error: File to import not found or unreadable: smui-theme.
可能是什么问题？
推荐指数
解决办法
查看次数
在自定义 Angular 库中使用 Postcss
我使用postcss、postcss-css-modules和posthtml-css-modules在 Angular 应用程序中实现 CSS 模块。我还使用了@angular-builders/custom-webpack来实现这一点。
现在，我想对我的自定义 Angular 库做同样的事情。但是，我不能使用@angular-builders/custom-webpack，因为 Angular 库是使用ng-packagr构建的。
所以，@angular-builders/custom-webpack不能使用：https : //github.com/just-jeb/angular-builders/issues/356
另一方面，ng-packagr不支持postcss：https : //github.com/ng-packagr/ng-packagr/issues/1471
我已阅读，它可以延长汇总配置（就是使用编译器NG-packagr在构建结束）在NG-packagr：
https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config
但我没有找到任何文档来实现这一点。
有人知道怎么做吗？
我认为的其他解决方案，它使所有样式全局化并使用scss-bundle和 postcss编译它们，就像我在这里所做的那样：NodeJs Script that compiles scss files failed because of postcss rule for undefined variables
如果我可以使用lodash，我将能够用散列类名替换类名，就像这里建议的那样：在 JavaScript / TypeScript 文件中使用 [hash:base64:5]
但要做到这一点，我需要知道如何在ng-packagr的构建中调用lodash。
有人知道怎么做吗？
任何其他解决方案都非常受欢迎。 …
推荐指数
解决办法
查看次数
Vite - 多个库入口点
几个小时后，我成功使用 vite 构建了具有多个入口点的自定义库。我想知道是否有更好的方法来解决这个问题。
// vite.config.ts
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
input: {
index: resolve(__dirname, 'src/index.ts'),
hooks: resolve(__dirname, 'src/hooks.ts'),
},
external: [...Object.keys(peerDependencies), ...Object.keys(dependencies)],
output: [
{
dir: resolve(__dirname, 'dist'),
format: 'es',
entryFileNames: "[name].[format].js",
globals: {
react: 'React',
},
},
{
dir: resolve(__dirname, 'dist'),
format: 'cjs',
entryFileNames: "[name].[format].js",
globals: {
react: 'React',
},
}
],
},
sourcemap: true,
}
})
构建生成此文件：
推荐指数
解决办法
查看次数
标签 统计
rollupjs ×10
javascript ×3
reactjs ×3
angular ×2
material-ui ×2
css ×1
dependencies ×1
es6-modules ×1
ng-packagr ×1
postcss ×1
react-hooks ×1
sass ×1
svelte ×1
typescript ×1
vite ×1
webpack ×1