标签: babel
在javascript es6中使用... spread语法命名为exports
我试图从库中导入所有内容作为哈希,修改它,并重新导出修改后的哈希,而不知道库中的所有命名导出.例如:
import * as reactBootstrap from 'react-bootstrap';
wrappedReactBootstrap = doFunnyThingsTo(reactBootstrap);
export {
...wrappedReactBootstrap
};
// or
export wrappedReactBootstrap;
我对https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export的理解是规范不允许以下内容.有人可以证实吗？
显然,循环是不可能的,因为导出和导入语句必须是顶级的.
推荐指数
解决办法
查看次数
如何完全禁用babel transform-regenerator
我正在寻找一种方法来完全禁用生成器函数转换与babel.有了babel 5,有一个blacklist选项,但似乎与babel 6没有办法做到这一点(至少我没有在官方网站上找到任何文档).
我目前的配置
{
"presets": [
"react",
],
"plugins": [
"transform-object-rest-spread",
]
}
如此处所述禁用它https://babeljs.io/docs/plugins/transform-regenerator/没有帮助.
有任何想法吗？
推荐指数
解决办法
查看次数
使用Webpack,Babel和React在IE11中出现语法错误
我在Internet Explorer 11中的React + Redux项目中遇到语法错误,但我不知道为什么会导致它.
我正在使用Webpack和Babel来编译它.
我尝试使用babel-polyfill和babel-es6-polyfill,但这没有帮助.
这是我得到的错误:
SCRIPT1002: Syntax error
File: app.js, Line: 70, Column: 1
第70行第1列是evalWebpack的开头:
/***/ }),
/* 21 */,
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nObject.define... <- Line 70
^--- Column 1
这是我的webpack.config.js:
'use strict';
// Include modules and plugins
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// App and build directories
const APP_DIR = path.resolve(__dirname, 'src/');
const BUILD_DIR = path.resolve(__dirname, 'public');
// …推荐指数
解决办法
查看次数
Babel-node不会在预设env上转换扩展运算符
我正在尝试使用带有nodemon的babel-node进行热重新加载.我基本上跟着这个回购.
我的dev脚本package.json看起来像这样:
"dev": "nodemon app.js --exec babel-node --presets env"
我的.babelrc:
{
"presets": ["env"]
}
尽管扩展运算符被列为env预设支持,但在使用此设置时,我得到了一个
SyntaxError:意外的令牌
推荐指数
解决办法
查看次数
在create react app Reactjs应用程序中使用常见的Sdk模块共享代码库
我想开始一个同时具有web和reactnative接口的新应用程序.
我决定将所有业务 - 非环境依赖代码转移到第三个包-aka sdk-我可以在两者之间共享反应和反应原生.
所以我的项目现在有4个模块
- 网络 - 用cra创建
- Sdk - 主要是redux + redux saga +反应容器+ Hoc's
- 移动 - 反复原生
服务器 - nodejs表达api.
- 所有的网络,移动和服务器都将依赖于Sdk模块.
- sdk模块将依赖于服务器模块 - 主要是为了暗示模拟和数据接口.
有没有标准的方法来实现这样的结构？
我很可能会喜欢
- 使用纱线工作区将所有节点模块提升到一个文件夹中,以避免在每个项目中重新安装包
- 我将同时在所有4个项目中工作,所以我需要hotreload才能意识到这一点.
**面临的挑战**
- Cra不会在src文件夹之外转换代码,所以虽然web项目确实刷新,但是我在sdk上做了更改.它无法理解es6代码.
- Jest也不了解node_modules中的es6
如何在同时处理sdk和Web模块的同时避免重建步骤？
推荐指数
解决办法
查看次数
模块构建失败(来自./node_modules/babel-loader/lib/index.js):TypeError:无法读取null的属性"绑定"
我在构建项目时遇到错误:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
我的开发环境如下:
节点:8.0.0
npm:5.0.0
devDependencies
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.0",
"babel-preset-env": "^1.7.0",
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.7"
}
推荐指数
解决办法
查看次数
Visual Studio：在嵌入式babel脚本中自动完成HTML标记
我有一个带有嵌入式babel脚本的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React tutorial</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
</script>
</body>
</html>
我希望在babel脚本中输入内容时
<script type="text/babel">
</script>
然后输入类似<div>该软件的内容</div>，方法是在
Visual Studio市场上的auto close tag扩展程序和sublime babel扩展程序都无法做到这一点。
我也跟着的建议这篇文章，并创建了一个名为文件.vscode/settings.json包含
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true
"emmet.includeLanguages": {
"javascript": "html"
}
而且这也没有效果。
推荐指数
解决办法
查看次数
(_.merge in ES6/ES7)Object.assign不覆盖未定义的值
lodash中有_.merge功能.我想在ES6或ES7中实现同样的功能.
有这个片段:
Object.assign({}, {key: 2}, {key: undefined})
我想收到{key: 2}.目前我收到了{key: undefined}
这不是深度合并.
可能吗？如果是,那么如何实现呢？
推荐指数
解决办法
查看次数
插件/预设文件不允许导出对象,仅导出函数
更新react-native后我收到此错误"^0.56.0":
bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/ben/vepo/frontend/node_modules/babel-preset-flow/lib/index.js
我尝试做类似于最高投票答案的事情,而不是babel-preset-flow:
https://github.com/babel/babel-loader/issues/540
.babelrc:
"presets": ["react-native", "flow", "@babel/preset-flow"]
的package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"@babel/preset-flow": "^7.0.0-beta.52",
"@babel/preset-react": "^7.0.0-beta.52",
"babel-preset-react-native": "^4.0.0",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"metro-bundler": "^0.22.1",
"native-base": …推荐指数
解决办法
查看次数
如何使用webpack生成d.ts和d.ts.map文件？
我找不到使用webpack生成d.ts和d.ts.map文件的方法。babel-loader仅生成js和js.map文件。我还需要d.ts和d.ts.map文件（可以使用tsc命令生成），如下图所示：
这是包含所有设置的最小存储库：https : //github.com/stavalfi/lerna-yarn-workspaces-example
更多细节
我搬到了Lerna + yarn。我的软件包之一core（将在其他软件包中使用）是用TS和JS编写的。
我正在将Webpack 4，Babel-loader 8用于ts-to-js。
其他包正在努力寻找类型定义和执行我的core包，但我只能够产生index.js和index.js.map使用的WebPack：
output: {
path: distPath,
filename: 'index.js',
},
{
"extends": "../tsconfig.settings.json",
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"declarationDir": "dist",
"rootDir": "src",
"outDir": "dist"
}
}
- 当我使用
tsc（没有webpack）进行编译时，一切都如我上图所示正常工作。
我的策略错了吗？我该怎么办？
我尝试了很多可生成d.ts文件的插件，但它们无法正常工作且无法创建d.ts.map文件。
我已经尝试过：typescript-declaration-webpack-plugin，npm-dts-webpack-plugin，dts-bundle-webpack，@ahrakio/witty-webpack-declaration-files。（它们列在的package.json中，core因此您可以对其进行克隆和使用）。
推荐指数
解决办法
查看次数
标签 统计
babel ×10
javascript ×6
ecmascript-6 ×4
reactjs ×3
webpack ×3
react-native ×2
babel-loader ×1
babel-node ×1
ecmascript-7 ×1
flowtype ×1
html ×1
lodash ×1
monorepo ×1
node.js ×1
redux ×1
typescript ×1