Webpack4配置babel中的useBuiltIns: 'usage'有关于core-js警告提示_weixin_43772428的博客

相关文章推荐

卖萌的烤土司 · uni-app如何重置swiper的curr ...· 5 月前 ·

俊逸的松球 · C# WinForm 中Console ...· 8 月前 ·

任性的刺猬 · javascript - 用 PHP ...· 1 年前 ·

纯真的柑橘 · Python库之SQLAlchemy - 知乎· 1 年前 ·

迷茫的煎鸡蛋 · java - AES-GCM: ...· 1 年前 ·

半月前，我使用 @vue/cli 3.x 版本搭建项目，引入一个包后，然后编译卡住不动，报这个错，因为当时刚好练习嵌套路由，以为是啥 module 和 router 模块起冲突，按它提示安装了 core-js@3 ,编译还是报错，卸了该版本，又装了 core-js@2 ，编译还是有这个警告提示！然后我直接把代码回退一个版本，提示依旧，编译后代码能正常正常跑起来，就没管他了。
这几天我在学习 webpack4.x ,跟着前辈们的代码，边看边敲。在引入 @babel/preset-env （ 一个帮你配置babel的preset，根据配置的目标环境自动采用需要的babel插件 ）配置 babel 中的 useBuiltIns: 'usage' 时，编译出现又出现这个警告提示，这次又撞上我了，遂决定盘它！英文不咋好，直接谷歌翻译了一下下文！

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default
version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.
You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:
  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3
大致意思是让我要么在package.json中的dependencies中加入了"core-js"的某个版本，要么安装"core-js"（安装是不可能再安装的！）
 按照提示我在@vue/cli 3.x项目的package.json的dependencies中加入了"core-js": "^2.6.5"，然后编译成功，没有了那个警告提示！ 
关于Babel7.4.0官网对于配置@babel/preset-env中useBuiltIns的介绍
 useBuiltIns
 “usage” | “entry” | false, defaults to false. 
 This option adds direct references to the core-js module as bare imports. Thus core-js will be resolved relative to the file itself and needs to be accessible. You may need to specify core-js@2 as a top level dependency in your application if there isn’t a core-js dependency or there are multiple versions. 
useBuiltIns: 'usage' (experimental) 
 Adds specific imports for polyfills when they are used in each file. We take advantage of the fact that a bundler will load the same polyfill only once. 
注意：experimental（实验的），我似乎明白了啥 
  "presets": [
      "@babel/preset-env",
        "useBuiltIns": "usage"
  "plugins": ["@babel/plugin-transform-runtime"]
在.babelrc配置了"useBuiltIns": "usage"后，Babel 会在你使用到 ES2015+ 新特性时，自动添加 babel-polyfill 的引用，并且是 partial 级别的引用。按我的理解按需引入。。。 
请注意： usage 的行为类似 babel-transform-runtime，不会造成全局污染，因此也会不会对类似 Array.prototype.includes() 进行 polyfill。
 项目如果是用 babel7 来转译，需要安装 @babel/core、@babel/preset-env 和 @babel/plugin-transform-runtime，而不是 babel-core、babel-preset-env 和 babel-plugin-transform-runtime，它们是用于 babel6 的 
                    半月前，我使用@vue/cli 3.x版本搭建项目，引入一个包后，然后编译卡住不动，报这个错，因为当时刚好练习嵌套路由，以为是啥 module 和 router模块起冲突，按它提示安装了core-js@3,编译还是报错，卸了该版本，又装了core-js@2，编译还是有这个警告提示！ 然后我直接把代码回退一个版本，提示依旧，编译后代码能正常正常跑起来，就没管他了。这几天我在学习webpack4.x...
 // First line inside your app (App.js for this example)
// Not needed with useBuiltIns: 'usage'
//import '@babel/polyfill'
指定文件.browserslistrc而不是babel.config.js browsers: [...] ：将由Autoprefixer和其他工具重用
useBuiltIns: 'usage
TL; DR
 如果您只想使用此webpack 4配置并且不想知道如何实现它，那么只需克隆此存储库并开始开发即可。
 git clone https://github.com/finmavis/webpack-4-boilerplate.git
 导航到您刚刚克隆的文件夹
安装所有依赖项， yarn或npm install
 然后，为了进行开发，只需运行脚本yarn start或npm run start
 要生成生产版本，只需运行script yarn build或npm run build脚本，它将生成文件夹build 。
使用npm init或yarn init您的项目
创建config和src文件夹
在config文件夹中创建webpack.config.js
 在src文件夹中创建index.html和index.js
 资料夹结构
|-- config
    |-- webpack.config.js
|-- src
    |-- index.html
    |-- index.js
|-- package.json
将webpac
.js文件打包配置
安装@babel/core @babel/preset-ent @babel-transfrom-runtime @babel-loader @babel/runtime-corejs3依赖包
npm i -D @babel/core @babel/preset-ent @babel-tran
				Vue-Webpack-4-Babel快速入门
VueJS + Webpack 4 + Babel教程：学习如何从头开始将Webpack 4集成到vuejs中。
npm i && npm run start
该项目是在许可下的开源软件。
				在使用webpack打包过程中，提示以下警告：
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed.
 Since this default
version will likely change in future versions of Babel, w
				webpack:Unknown option: .useBuiltIns,Module build failed
ERROR in ./src/js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] E:\betterLifeFuture\webpack\13.js兼容性处理\src\js\index.js: Unknown option: .useBuiltIns. Ch
				由于webpack版本的不同各个配置的写法令人头疼，在使用core-js过程中报了如下错误（此时我用的4.0版本）
Unknown option: .useBuiltIns. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.  Maybe you meant to use
以下是具体报错信息
在配置core-js的时候少写了一层use所以会报这个错，加上就可以了。
				Javascript库样板
用于Javascript项目的Library Starter Kit  这是一个更强大的库样板。 作为最小的替代方法，请查看 。
 :white_medium_star: 产品特点
Webpack 5
 热装（ npm start ）
 CSS自动前缀
SASS / SCSS支持
UMD导出，因此您的库可在任何地方使用。
 基于 （适用于Vanilla JS库或React库）
 开玩笑的单元测试
npm run demo一个准备部署的演示
 用于构建的可定制文件头
 可配置的postinstall消息
 每日依赖关系更新
 :package: 入门
git clone https://github.com/hodgef/js-library-boilerplate.git myLibrary
npm install
 :gem_stone: 客制化
运送前，请确保：
 编辑LICENSE文件
编辑package.json信息（这些信息将用于生成构建文件的标题）
 编辑library: "MyLibrary" ，其库的导出名称位于./config/
npm i web-webpack-plugin --save-dev
 const { WebPlugin , AutoWebPlugin } = require ( 'web-webpack-plugin' ) ;
输出html文件
webpack配置
module . exports = {
	entry : {
		A : './a' ,
		B : './b' ,
	plugins : [
		new WebPlugin ( 
在设置core-js的版本时打包报错
ERROR in ./src/index.js
Module build failed (from ../node_modules/_babel-loader@8.2.2@babel-loader/lib/index.js):
Error: [BABEL] D:\Webpack\12js的兼容性处理\src\index.js: Unknown option: .useBuiltIns. Check out https://babeljs.io/docs/e
npm install babel-loader @babel/core -D  // babel与webpack通信的loader
npm install @babel/preset-env -D  // ES6转ES5的工具
npm install core-js regenerator-runtime -D  // babel7.4之后的兼容浏览器规则包。babe...
				前端工程化经历过很多优秀的工具，例如 Grunt、Gulp、webpack、rollup 等等，每种工具都有自己适用的场景，而现今应用最为广泛的当属 weback 打包了。因此 webpack 也自然而然成了面试官打探你是否懂前端工程化的重要指标。
由于 webpack 技术栈比较复杂，因此决定分以下几篇文章全面深入的讲解：
基础应用篇
高级应用篇
性能优化篇
原理篇（ webpack 框架执行流程、手写 plugin、手写 loader ）
webpack 是什么
webpack 是模块打包工具
				### 回答1：
这个错误消息表明你在使用webpack-cli命令行工具时，输入了一个不被识别的选项 "--inline"。可能是你的webpack版本过低或者该选项已经被弃用了。请检查你的webpack版本并确认使用的选项是否正确。
### 回答2：
在使用 webpack 进行项目构建的过程中，我们通常会使用 webpack-cli 命令行工具来执行 webpack 相关的操作。在执行特定的 webpack 命令时，我们还可以通过添加不同的选项来控制 webpack 的行为。
然而，有的时候在执行 webpack-cli 命令时，可能会遇到一些错误提示。比如在执行 webpack-dev-server 命令时，可能会遇到类似“[webpack-cli] error: unknown option '--inline'”这样的错误提示。
这个错误提示通常是由于我们在执行 webpack-dev-server 命令时，使用了一个已经废弃的选项“--inline”。这个选项原本是用来启用 webpack-dev-server 的 inline 模式，即将 webpack-dev-server 的客户端脚本注入到 HTML 中，以方便自动刷新页面等操作。然而，自从 webpack-dev-server 的版本升级到3.x之后，这个选项已经被取消了。
如果在执行 webpack-dev-server 命令时，我们仍然使用“--inline”选项，系统就会提示该选项不存在，从而导致错误。解决这个问题的方法很简单，只需要将“--inline”选项替换成新的“--liveReload”选项即可。这个新选项的作用和原来的“--inline”选项类似，是用来启用 webpack-dev-server 的自动刷新功能的。
综上所述，当我们在使用 webpack-cli 命令行工具时，一定要注意选项和命令的正确使用，避免出现类似“[webpack-cli] error: unknown option '--inline'”这样的错误提示，从而提高项目构建的效率和质量。   
### 回答3：
当在使用webpack进行打包时，遇到错误提示[webpack-cli] error: unknown option '--inline'，这是因为webpack-cli版本过低或缺少相应的plugin造成的。
在webpack4之前，开启热更新需要通过webpack-dev-server来实现，而webpack-dev-server中的--inline是用来将热更新的代码注入到HTML页面中的。但是在webpack4中，webpack和webpack-dev-server已经合并成一个工具，所以不需要单独安装webpack-dev-server。
正确的做法是：在package.json中添加如下代码：
```javascript
"scripts": {
  "start": "webpack-dev-server --mode development --open",
不需要再使用--inline参数，直接运行npm start即可启动webpack-dev-server，实现热更新。
如果还是遇到此错误，建议检查webpack-cli的版本是否过低，可通过以下代码升级webpack-cli版本：
```javascript
npm install webpack-cli@latest -D
同时，可检查是否缺少webpack-dev-server插件，可通过以下代码安装：
```javascript
npm install webpack-dev-server -D
以上步骤操作后，重新尝试打包即可正常运行。