- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试捆绑两个 JavaScript 模块,以便生成的代码在 IE11 中工作。为此,我设置了一个 yarn/npm 项目,该项目使用 rollup.js 进行捆绑,使用 Babel 进行转译。一切正常,直到我添加(非开发)依赖 core-js
.
这里有详细信息:
1 添加core-js前的设置
JS文件
{
"name": "rollup_for_ie",
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@rollup/plugin-babel": "^5.2.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"rollup": "^2.24.0"
},
}
rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
export default {
input: 'src/main.js',
output: {
file: 'dist/main.js',
format: 'iife'
},
plugins: [
resolve({
browser: true
}),
babel({
exclude: "node_modules/**", // only transpile our source code
babelHelpers: 'bundled'
})
]
};
babel.config.js
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: "> 0.5%, ie >= 11"
},
modules: false,
spec: true,
useBuiltIns: "usage",
forceAllTransforms: true,
corejs: 3
}
]
],
};
当我运行
rollup -c
我收到有关未解决依赖项的警告,但有一个捆绑文件
dist/main.js
使用 src 目录中的(使用过的)东西生成。生成的文件甚至可以在 Chrome 等现代浏览器中使用。到目前为止,一切都很好。
rollup -c
没有给我警告 - 但结果 dist/main.js 开始像
(function (exports) {
'use strict';
var $ = require('../internals/export');
.
.
.
作为脚本,Chrome 和 IE 都不能执行!看起来 core-js 库的存在以某种方式使汇总捆绑器关闭。
dist/main.js
在 Chrome 和 IE11 中作为非模块脚本工作?
最佳答案
我认为当您启用选项 useBuiltIns: "usage"
这意味着它将附加来自 corejs
的代码到你用 cjs
编写的模块文件中风格。所以你必须添加这个插件@rollup/plugin-commonjs
转换回 esm
,那么它将起作用:
import commonjs from '@rollup/plugin-commonjs';
export default {
// ...
plugins: [
// ...
commonjs(),
]
};
关于javascript - 将 JS 与 rollup 和 Babel 捆绑以在 IE11 中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63407950/
我有一个要提交的 iOS 应用程序,我的应用程序在我的 iPhone 上运行。我将 apple id 帐户添加到 Xcode 并在 Xcode 的常规部分下输入我的 bundle id,然后单击“修复
我有一个SDK项目,它在gradle中引用了很多依赖项。我必须要求SDK用户在项目中使用SDK时添加这些依赖项。问题是,每当我添加一些新的依赖项或将当前的依赖项替换为新的依赖项时,我都必须要求用户进行
我使用 Microsoft.AspNet.Web.Optimization用于 css 和 js 捆绑和缩小的 nuget 包。 我在这个路径 ~/bundles/shared.css 中创建了一个包
我使用 laravel-mix(包括 webpack)来打包 JS 文件。使用 BundleAnalyzerPlugin,我发现我的输出文件包含多个 JQuery 库副本,这增加了输出文件的大小。 它
我正在使用 maven felix 插件来创建 OSGi 包,但是假设您有一个包“com.example”存在于project1和project2中。此外,project2 依赖于 project1。
当我尝试捆绑我的 Meteor 应用程序时,我得到: $ meteor bundle app.tgz Errors prevented bundling: Exception while bundli
因此查看 bundleconfig.cs 它应该允许基于设备类型进行捆绑。唯一的问题是因为它在 App_Start 中,所以不允许我访问 Request 对象。有什么想法可以实现基于设备的捆绑吗? 最
上下文 http://news.ycombinator.com/item?id=4125530 问题: 这是否最终意味着 Java 应用程序将能够发布到 Mac 商店? (因为 JRE 自动捆绑到应用
我正在尝试为一个 React/Redux 项目创建我自己的 Webpack 配置。配置看起来很好,但是包的大小很大(在开发模式下,我知道如何在生产模式下减少它) 我的 package.json 看起来
所以我一直收到这个 Bundle ID 错误,说它不可用而且我真的不知道如何修复它。这是错误: 提供的数据有误。请更正并重新提交。标识符为“com.team.AppName”的 App ID 不可用。
我正在浏览 SO 并找到了 some code这向我提出了一个问题。 struct node* BuildOneTwoThree() { struct node *list = malloc(3 *
我正在为 Delphi XE7 使用 intraweb XIV 捆绑版。当我在这个新的捆绑版本中测试一个 intraweb XII 应用程序时,SSL/TLS 不工作。捆绑版本不支持 SSL/TLS?
预期: 当我使用 webpack 构建时,我的所有 JS 文件都会被捆绑,除了 ./src/Portfolio 目录中的文件(根据我的 Webpack.config.js 设置)。 实际: Webpa
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improve
我有一个项目引用了许多开源库,有些是新的,有些不是很新。也就是说,它们都很稳定,我希望坚持使用我选择的版本,直到我有时间迁移到更新的版本(我昨天测试了 hsqldb 2.0,它包含许多 api 更改)
我正在创建一个 REST API,并且我一直在研究允许捆绑来自客户端的请求的想法。我所说的捆绑是指他们可以发送一个包含多个“真实”请求的请求,然后将它们一起交付给客户。通常是 javascript a
在我的 AngularJS 项目中,我有一个 HTML 模板,其中 innerText 位于新行中: Click here 我正在使用 webpack 作为我的捆绑器。我希望它 trim
我已经为我的应用程序创建了一个静态库。现在,我的应用程序使用我在应用程序中引用的 plists 和图像等来源。 如何捆绑这些图像并将它们与静态库一起交付,以及我需要在源加载代码中进行哪些更改才能从该
所以, 我是 webpack 的新手,我正在开发一个项目,在该项目中我们只加载一个文件 bundle.js,我知道我可以单独加载文件。 但我想要的是bundle.js中未缩小的文件。目前我正在获取缩小
如何使用用户区域设置登录路径?我试过了 check_path: /{_locale}/login_check 和 check_path: /(en|ru)/login_check 但什么也没有
我是一名优秀的程序员,十分优秀!