- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想知道如果我们使用 babel loader + 所有预设,为什么我们需要将 babel-polyfill 包含到我们的组件中?我只是认为 babel-loader 应该自己完成所有工作。
示例取自此处 https://github.com/reactjs/redux/tree/master/examples
我要问的是:
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
这是包示例:
{
"name": "redux-shopping-cart-example",
"version": "0.0.0",
"description": "Redux shopping-cart example",
"scripts": {
"start": "node server.js",
"test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register",
"test:watch": "npm test -- --watch"
},
"repository": {
"type": "git",
"url": "https://github.com/reactjs/redux.git"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/reactjs/redux/issues"
},
"homepage": "http://redux.js.org",
"dependencies": {
"babel-polyfill": "^6.3.14",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.2.1",
"redux": "^3.2.1",
"redux-thunk": "^1.0.3"
},
"devDependencies": {
"babel-core": "^6.3.15",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
"cross-env": "^1.0.7",
"enzyme": "^2.0.0",
"express": "^4.13.3",
"json-loader": "^0.5.3",
"react-addons-test-utils": "^0.14.7",
"redux-logger": "^2.0.1",
"mocha": "^2.2.5",
"node-libs-browser": "^0.5.2",
"webpack": "^1.9.11",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.9.1"
}
}
这是来自 https://github.com/reactjs/redux/tree/master/examples 的 webpack 配置示例
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
loaders: [ 'babel?presets[]=react,presets[]=es2015,presets[]=react-hmre' ],
exclude: /node_modules/,
include: __dirname
},
{
test: /\.json$/,
loaders: [ 'json' ],
exclude: /node_modules/,
include: __dirname
}
]
}
}
最佳答案
Babel 将您的代码转换为浏览器可以理解的内容,但生成的代码使用的功能可能适用于每个浏览器,也可能不适用于每个浏览器。例如,并非所有浏览器都支持 Object.assign
,因此 babel-polyfill 填补了这个漏洞。它只是一个 polyfill 的集合,您通常会包含它们以支持旧版浏览器。
考虑这段代码:
const foo = {
name: 'Homer'
};
const bar = Object.assign({}, foo, {age: '?'});
console.log(Object.keys(foo), Object.keys(bar));
Babel 会将其转译为几乎相同的内容:
'use strict';
var foo = {
name: 'Homer'
};
var bar = Object.assign({}, foo, { age: '?' });
console.log(Object.keys(foo), Object.keys(bar));
因为这是正常的老式 JS 语法。然而,这并不意味着所有浏览器都实现了所使用的 native 函数,因此我们需要包含polyfill。
关于reactjs - 为什么我们需要使用 import 'babel-polyfill' ;在 react 组件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36196592/
我正在为我的 React 项目设置 Webpack,并对 babel 感到困惑, babel-core , babel-loader , babel-preset-2015和babel-preset-
所有这些 babel 依赖项是什么?它们各自的用途是什么,它们有何不同?我应该为我的 nodejs 网络应用程序使用哪一个? 我已经查看了 API 网站,但是否有任何指南可以将这些内容转化为简单的人类
我的 Node Webpack 项目使用了三个 babel 库。它们之间有什么区别以及如何使用它们? "dependencies": { "babel-runtime": "^5.8.24" }
我用 @babel/core 替换了 babel-core 而 babel-loader 期望 babel-core: { "name": "myproject-ui", "version":
我尝试配置一个环境来使用 babel 和 webpack 开发 javascript。 但是我不明白关于presets的babel配置. 在 Usage Guide ,我们可以看到预设为 "@babe
我已经安装了 babel 7.5,理想情况下它应该以 preset-env 包为目标,但不确定它为什么要寻找“babel-preset-es2015”。 你们能告诉我我做错了什么吗?下面是我的代码 p
我正在更新a boilerplate中使用的babel包,从 babel-core、babel-register 等到@babel/core、@babel/register > 等 问题:在 npm
设置 通天塔 6 (^6.0.0), Node 5.4.0,Express 4.13.x, babel-node 和 babel-register 都有警告,禁止在生产环境中使用babel.io 网站
我正在尝试转换编译我的 react/es6 代码并且来自 browserify。由于新的 babel 6 版本以及大多数教程现在已经过时的事实,我正在努力创建一个 webpack 构建。这适用于我的
我有一个使用 Typescript 和 @babel/preset-env 的项目。与 Webpack 捆绑失败并显示此错误和以下配置。 如果我取消注释该行,这会强制 @babel/plugin-pr
我在浏览器中使用 babel -> babel-standalone 现在我想使用 ES decorator 语法。但是所有的通天塔doc intro 是服务器端的 babel,比如 ` { "p
我正在编写对从 cdnjs.com 引入的所有这些库的 react 。但是,我发现它报告错误:'Uncaught TypeError: Cannot read property 'keys' of u
我正在使用 babel v7.6.x 并设置了以下内容。 包.json "scripts": { "dev": "nodemon --exec babel-node bin/index.js
我正在学习巨大的 JavaScript 生态系统,但我无法理解以下内容。 Babel 是一个编译器,来自官网: Babel is a toolchain that is mainly used to
在我使用yarn add -D babel-plugin-react-relay安装relay-query插件后,并在运行开发服务器后,我收到此错误: Error: [BABEL] /Users/ne
我使用 babel 6 和 React 插件,并按照文档说明设置转译过程。我已经阅读过要让 React 工作,我需要使用 es2015 和 React preset。最初,使用这两个预设一切都运行良好
我对 Babel 选项/配置有点迷失。我想使用最新的 js 功能并编译(使用 webpack)为浏览器代码。 babel-polyfill 和有什么区别和 babel plugins与 babel-p
这个问题在这里已经有了答案: Babel file is copied without being transformed (10 个答案) 关闭 6 年前。 我只是使用 npm (npm inst
安装时 npm install browserify babelify babel-preset-es2015 我正面临以下警告信息 npm WARN deprecated babel-preset-
什么版本的标准? 12.0.1 什么操作系统、Node.js 和 npm 版本? 视窗 10, 节点 v10.15.1, NPM v.6.8.0 你期望会发生什么? 我在 devDependencie
我是一名优秀的程序员,十分优秀!