如何使用babel创建非最小化和最小化构建
Babel是一个广泛使用的JavaScript编译器，它可以将新版本的JavaScript代码转换为向后兼容的旧版本，以便在不同的浏览器和环境中运行。使用Babel创建非最小化和最小化构建可以帮助我们优化代码并提高性能。
要使用Babel创建非最小化和最小化构建，可以按照以下步骤进行操作：
- 安装Babel：首先，需要在项目中安装Babel及其相关插件。可以使用npm或yarn来安装Babel的核心包和其他插件。具体安装命令如下：
- 安装Babel：首先，需要在项目中安装Babel及其相关插件。可以使用npm或yarn来安装Babel的核心包和其他插件。具体安装命令如下：
- 配置Babel：在项目根目录下创建一个名为
.babelrc的文件，并在其中配置Babel。例如，可以使用@babel/preset-env预设来指定要转换的JavaScript版本。.babelrc文件的内容如下： - 配置Babel：在项目根目录下创建一个名为
.babelrc的文件，并在其中配置Babel。例如，可以使用@babel/preset-env预设来指定要转换的JavaScript版本。.babelrc文件的内容如下： - 创建非最小化构建：要创建非最小化构建，可以使用Babel的命令行工具（
@babel/cli）来转换源代码文件。例如，可以使用以下命令将src目录下的所有JavaScript文件转换为非最小化构建： - 创建非最小化构建：要创建非最小化构建，可以使用Babel的命令行工具（
@babel/cli）来转换源代码文件。例如，可以使用以下命令将src目录下的所有JavaScript文件转换为非最小化构建： - 创建最小化构建：要创建最小化构建，可以使用Babel的插件来进行代码压缩和优化。一个常用的插件是
babel-minify，它可以帮助我们减小构建文件的大小。首先，需要安装babel-minify插件： - 创建最小化构建：要创建最小化构建，可以使用Babel的插件来进行代码压缩和优化。一个常用的插件是
babel-minify，它可以帮助我们减小构建文件的大小。首先，需要安装babel-minify插件： - 然后，在
.babelrc文件中添加以下配置： - 然后，在
.babelrc文件中添加以下配置： - 最后，使用Babel的命令行工具将源代码文件转换为最小化构建：
- 最后，使用Babel的命令行工具将源代码文件转换为最小化构建：
使用Babel创建非最小化和最小化构建可以帮助我们在不同的浏览器和环境中运行代码，并且通过最小化构建可以减小文件大小，提高加载速度和性能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（Serverless）：https://cloud.tencent.com/product/scf
- 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
相关·内容
对于用ES6/7编写的库，我希望将库编译(到ES5)到dist/文件夹。我还想为这个库运行测试(用ES6/7编写)。
我的dev依赖项如下(package.json)所示：
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/register": "^7.4.4",
&
浏览 1提问于2019-06-20得票数 13
回答已采纳
3回答
我正在尝试添加一个构建命令，它使用babel CLI来转换我的ES6。我很难把它正确地指向babelrc。
文件结构大致如下：
root
src
index.js
...
.babelrc
.package.json
在我的package.json中，我最初尝试了以下操作：
"scripts": {
"build": "babel --out-dir dist src",
...
},
但这给出了一个错误，因为我在代码中使用了数组解构符号。我想这是因为它没有拾取我的.
浏览 2提问于2020-08-10得票数 1
1回答
我正在构建一个非常基本的React应用程序，方法是在我的html页面中包含React库脚本标记，并在脚本标记中加载我的组件。我不使用模块或create-react-app。我的组件看起来如下：
TIPS.JS
class Tips extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<h1>Hello World</h1>
浏览 2提问于2019-11-20得票数 4
回答已采纳
我正在开发一个使用babel版本5、webpack版本1和ava版本0.14.0的。
在运行npm run build-example时做了一些更新之后，我得到：
模块构建失败(来自./node_node/babel-加载程序/lib/index.js)：Error:找到多个配置文件。请删除一个：
package.json
路径\反应-明星。
更新后，我现在使用babel版本7.10、webpack版本4.43和ava版本3.10.1。以下是更新的package.json
{
"name": "react-rating-stars-comp
浏览 3提问于2020-07-12得票数 0
1回答
我使用以下命令行创建项目：
npx create-react-app xxxxxx
我创建了一个完整的批处理文件来处理整个过程，添加了一些模块，如babel、lodash和webpack，添加了一些其他模块来解决一些“对等”问题，并移动了一些文件，以便更容易地与babel和webpack一起管理文件。这是批处理文件的内容：
@echo off
IF %1.==. GOTO No1
Goto SetName
:Dowork
cls
echo New folder name: %arg1%
call npx create-react-app %arg1%
cd %arg1%
mkdir de
浏览 0提问于2020-04-14得票数 1
2回答
我正在使用babel-env与vscode和纱线工作区，以及在加载包时(编译后)。
我没有收到任何关于进口自动完成的建议。
我的项目结构：
|--packages
| |--common
| |--src
| |--dist
| |--.babelrc
| |--server
| |--src
| |--dist
| |--.babelrc
| |--web(create-react-app default settings)
babelrc设置：
{
"presets": ["@babel/preset-env"]
}
浏览 4提问于2019-11-16得票数 3
回答已采纳
我用Babel把ES6 JavaScript转到ES5：
我不知道如何更新我的.babelrc文件以自动将特定的ES6文件转换为特定的ES5文件。
我应该在我的.babelrc 文件中添加哪些代码来实现这个目的？这可能吗？
下面是我的.babelrc文件的内容：
{
"presets": [
"@babel/preset-env",
"minify"
]
}
下面是我在Mac的iTerm上执行的命令，将我的ES6文件转换为我的ES5文件：
npx babel ./assets/js/scripts.js --out-fi
浏览 1提问于2020-07-17得票数 0
1回答
我使用以下npm构建脚本与Babel 7；
"build": "rm -rf dist && babel src/lib --out-dir dist --copy-files --no-copy-ignored",
这是我的.babelrc.json文件中的忽略部分；
"ignore": [
"**/__mocks__",
"**/__snapshots__",
"**/*.snap",
"**/*.test.js"
]
尽管成功地忽略了匹配的tes
浏览 4提问于2022-02-05得票数 0
我使用节点版本14
下面是我的package.json文件：
{
"scripts": {
"start": "nodemon --exec babel-node ./src/app.js",
"build": "babel ./src -s -d dist",
},
"devDependencies": {
"@babel/core": "^7.10.3",
"@babe
浏览 1提问于2020-07-09得票数 0
Babel 7.2.0
我需要转换我的JS-文件，并将它们合并到单个结果文件中。这是我的尝试：
npx babel --source-root src/index.js --out-file lib/result.js --minified --presets @babel/preset-env
但我知道错误是：
巴贝尔：
stdin编译需要-f/-文件名文件名或--no-babelrc。
我试过-f和--no-babelrc，但这对我没有帮助.
浏览 0提问于2018-12-15得票数 4
回答已采纳
1回答
我正在从头开始创建一个没有create- React -app的react项目。但它在我的mac上运行良好，但在我的另一台ubuntu笔记本电脑上就不行了。下面是我之前的.babelrc文件内容。 "presets": [
"@babel/preset-react",
"@babel/preset-env"
] 它在我的mac (npm版本6.12.0)上运行良好，但不能在ubuntu(npm版本6.14.5)上运行，它显示错误，无法编译src/index.js -> ReactDOM.render(<App /&g
浏览 24提问于2020-06-19得票数 2
我的目标是在另一个项目中这样做
import { FuncA, FuncB, FuncC } from @myorg/hellow
我正在为内部问题创建自己的节点模块，我已经定义了have的文件夹结构如下：
hellow
┣ dist(ES5 of src)
┣ src
┃ ┣ Fileone
┃ ┃ ┗ Fileone.js
┃ ┃ Filetwo
┃ ┃ ┗ Filetwo.js
┃ ┗ index.js
┣ .babelrc
┣ .gitignore
┣ .npmignore
┣ index.js
┣ package-lock.json
┗ package.j
浏览 0提问于2021-12-01得票数 0
2回答
我在我的项目中使用@babel/节点包
当我把我的项目作为：
npm运行开发
我在cmd窗口收到这条消息：
> Using external babel configuration
> Location: "...(project folder path)\.babelrc"
当我构建我的项目jsx文件时，我收到了错误。如何解决这个问题？
Dev依赖关系：
"devDependencies": {
"@babel/node": "^7.7.4",
"@babel/preset-env
浏览 2提问于2020-01-28得票数 1
回答已采纳
为什么这个不行？
npx -p @babel/core -p @babel/cli -p @babel/preset-env babel --presets=@babel/preset-env src -d deploy
这确实有效，但我不认为在NPX中预装是必要的：
npm i @babel/core @babel/cli @babel/preset-env && npx babel --presets=@babel/preset-env src -d deploy
从大多数描述来看，从NPM注册表中检索本地找不到的任何内容，然后在运行之前安装它，或者甚至能够在不安装的情况下
浏览 3提问于2019-09-10得票数 1
回答已采纳
我在试着和Babel一起编写打字稿。我的项目根目录中有babel.config.js。
module.exports = function (api) {
// https://babeljs.io/docs/en/config-files#apicache
// api.cache(true);
return {
presets: [
'@babel/preset-env',
'@babel/preset-typescript',
'@ba
浏览 4提问于2020-05-19得票数 0
我有一个使用babel核心transform函数的全局节点模块。我的模块根部没有.babelrc。它需要一个文件，基本上使用transform来“编译”它。
const result = transformSync(content, {
filename: src,
});
有一个.babelrc文件和该文件一起，我确实能够找到它
{
"presets": ["@babel/preset-env"]
}
但是它抱怨没有找到‘@babel/preset’，这是正确的，因为模块安装的是我的，而不是文件/..babelrc被转移。
我在中尝试过许多选项，但
浏览 0提问于2018-10-15得票数 4
回答已采纳
我已经安装了"@babel/core"："^7.7.7"，"@babel/preset-env"："^7.8.3"，"@babel/preset-react"："^7.7.4"，"@babel/register"："^7.8.3“。 我用下面这行代码运行mocha (通过npm的run命令)： mocha --require @babel/register --require ./test/helpers.js --require ./test/dom.js --requi
浏览 16提问于2020-01-28得票数 1
回答已采纳
1回答
考虑以下代码
const fooBar = parent => class extends parent {
constructor() {
super();
this.foo = 1;
}
bar() {
return 2;
}
}
class FooBar extends fooBar(Object) {};
console.log(new FooBar());
它创建一个mixin fooBar并从中派生FooBar。可以预见，运行此代码将输出FooBar { foo: 1 }。
现在让我们把巴贝尔带进来。我在6.xx和最新的7.2中尝试
浏览 0提问于2018-12-13得票数 1
所以我对webpack有点陌生，因为我从来没有创建过我自己的工作流程，我正在尝试建立一个环境来编译ES2015+、JS和SCSS代码，这是第一次。由于某些原因，当我试图编译我的webpack时，我得到了错误Module build failed: Error: Cannot find module '@babel/core'。但是我已经用npm install安装了它
Webpack.config.js
module.exports = {
entry: './components/js/app.js',
output: {
fi
浏览 0提问于2018-02-08得票数 6
我使用这个docs 向我的网站添加了一个使用JSX的React组件。我运行这个命令来编译：
npx babel --watch src --out-dir . --presets react-app/prod
我在chrome控制台中得到了这个错误：
Uncaught :无法在模块外使用导入语句
它来自已编译文件中的以下一行：import _regeneratorRuntime from 'babel-runtime/regenerator';
我不明白--在文档中，他们说您可以像使用CSS预处理器一样使用node_module，但在这里看来，node_module依赖于n
浏览 0提问于2020-05-25得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
