精华内容
下载资源
问答
  • babel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel.config.jsbabel...
  • {//用来指定的javascript语言类型和风格,sourceType用来指定js导入的方式,默认是script parser: 'babel-eslint'//用来指定eslint解析器 }, rules: {//用来设置从插件来的规范的规则,使用必须去掉前缀eslint-...

    本文以自己项目所用到的配置来解释

    .browserslistrc文件

            文件作用:设置浏览器的兼容。

    > 1%
    last 2 versions
    not dead
    

    > 1%:代表该项目兼容全球超过1%使用的浏览器。
    last 2 versions:表示左右浏览器兼容到最后两个版本。
    not dead:not是逻辑操作符,即对dead取反
    dead条件:最新的两个版本中发现其市场份额以低于0.5%,并且24个月内没有任务官方支持和更新了。

    .eslintrc.js文件

            文件作用:语言检测文件

        module.exports = {
            root: true,//此项是用来告诉eslintrc找当前配置文件不能往父级查找。
            env: {//此项指定环境的全局变量
                node: true
            },
            'extends': [//此项是用来配置标准的js风格,就是说写代码的时候要规范的写
                'plugin:vue/essential', // 启用 vue 必要的 ESLint 规则
                'eslint:recommended'
            ],
            parserOptions: {//用来指定的javascript语言类型和风格,sourceType用来指定js导入的方式,默认是script
                parser: 'babel-eslint'//用来指定eslint解析器
            },
            rules: {//用来设置从插件来的规范的规则,使用必须去掉前缀eslint-plugin-
                //主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
                //"off"--->0 关闭规则
                //"warn"--->1  开启警告规则
                //"error"--->2  开启错误规则
                'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
                'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
            }
        }
    

    babel.config.js文件

            文件作用:js编译器

        module.exports = {
            presets: [
                '@vue/cli-plugin-babel/preset'
            ],
            plugins: [
                [
                    "component",
                    {
                        "libraryName": "element-ui",
                        "styleLibraryName": "theme-chalk"
                    }
                ]
            ]
        }
    

    package-lock.json

            锁定安装时的包的版本号

    package.json

            包含项目名称、项目版本、项目描述以及项目运行的一些脚本(依赖)

    {
        "name": "vuepro",//项目名称
        "version": "0.1.0",//项目版本
        //防止意外发布私有存储库的方法
        "private": true,//npm拒绝发布它
        "scripts": {//npm run XXX:命令
            "serve": "vue-cli-service serve",
            "build": "vue-cli-service build"
        },
        "dependencies": {//项目打包后用到的依赖(运行依赖)
    
        },
        "devDependencies": {//开发阶段用到依赖(开发依赖)
    
        }
    }
    
    
    展开全文
  • .babelrc和babel.config.js 一、前言 今天看ES6的知识发现了项目中.babelrc和babel.config.js 都是Babel的配置文件,之前没怎么研究过两者的区别,今天来学习记录下 二、学习 babel 7.x 以上开始支持两种类型的配置...

    .babelrc和babel.config.js

    一、前言

    今天看ES6的知识发现了项目中.babelrcbabel.config.js 都是Babel的配置文件,之前没怎么研究过两者的区别,今天来学习记录下

    二、学习

    babel 7.x 以上开始支持两种类型的配置文件, 分别是.babelrc 和 babel.config.js

    babel.config.js是在babel第7版引入的,主要是为了解决babel6中的一些问题

    • .babelrc会在一些情况下,莫名地应用在node_modules
    • .babelrc的配置不能应用在使用符号链接引用进来的文件
    • node_modules中的.babelrc会被检测到,即使它们中的插件和预设通常没有安装,也可能在Babel编译文件的版本中无效

    并且支持的文件扩展名:

    Babel 可以使用 Node.js 原生支持的任何文件扩展名进行配置:您可以使用.json、 .js、.cjs和.mjs, forbabel.config.json和.babelrc.jsonfiles

    推荐使用场景:

    • babel.config.json
      • 你正在使用一个monorepo(可以理解为在一个项目中会有多个子工程)
      • 你希望编译node_modules以及symobllinked-project中的代码
    • .babelrc
      • 你的配置仅适用于项目的单个部分
      • 需要在子目录/文件中运行一些特定的转换,比如你可能不希望一些第三方库被转码
    • 综合推荐使用babel.config.json,Babel itself is using it

    总结: 推荐使用babel.config.js来作为整个项目的babel配置,

    • .babelrc 只会影响本项目中的代码
    • babel.config.js会影响整个项目中的代码,包含node_modules中的代码
    展开全文
  • babel.config.js

    千次阅读 2020-04-27 17:03:54
    插件和设置的集合 module.exports = { presets: [ '@vue/app' ], // 如果需要按需引入第三方库,在下面添加 plugins:[ [ "import", { "libraryName": "vant", "libraryDi...

    插件和设置的集合

    module.exports = {
      presets: [
        '@vue/app'
      ],
      // 如果需要按需引入第三方库,在下面添加
      plugins:[
          [
              "import",
              {
                  "libraryName": "vant",
                  "libraryDirectory": "es",
                  "style": true
                }
          ],
          [
              "import",
              {
                  "libraryName": "we-vue",
                  "style": "style.css"
                },
                "we-vue"
          ]
      ]
    }

     

    展开全文
  • babel.config.js 和 .babelrc

    千次阅读 2020-11-04 10:22:44
    babel.config.js 是按照 commonjs 导出对象,可以写js的逻辑。 相对文件的配置 .babelrc 文件,具有不同的拓展名 总结:baberc 的加载规则是按目录加载的,是只针对自己的代码。config的配置针对了第三方...

    Babel 有两种并行的配置文件格式,可以一起使用,也可以分开使用。

    1. 项目范围的配置

      babel.config.js 文件,具有不同的拓展名(json、js、html)
      babel.config.js 是按照 commonjs 导出对象,可以写js的逻辑。

    2. 相对文件的配置

      .babelrc 文件,具有不同的拓展名

    总结:baberc 的加载规则是按目录加载的,是只针对自己的代码。config的配置针对了第三方的组件和自己的代码内容。babel.config.js 是一个项目级别的配置,一般有了babel.config.js 就不会在去执行.babelrc的设置。

    中文文档链接:https://www.babeljs.cn/

     ---- 以上转载

    从自己的项目来看 新项目使用的是 babel.config.js
    而老项目用的却是 .babelrc
    感觉是因为 老项目用的还是vue2.0、新项目使用的是vue3.0从而使用babel.config.js

     

    babel是什么?

    javascript在不断的发展,各种新的标准和提案层出不穷,但是由于浏览器的多样性,导致可能几年之内都无法广泛普及,babel可以让你提前使用这些语言特性,他是一种用途很多的javascript编译器,他把最新版的javascript编译成当下可以执行的版本,简言之,利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言。

    展开全文
  • babel.config.js会影响整个项目中的代码,包含node_modules中的代码 推荐使用babel.config.js babelrc { "plugins": [ [ "@ks/babel-plugin-component", { "libraryName": "@ks/sharp-ui", "sty..
  • babel.config.js 和 .babelrc 对比

    千次阅读 2020-08-11 18:13:51
    Babel 有两种并行的配置文件格式,可以一起使用,也可以分开使用。 项目范围的配置 babel.config.js 文件,...babel.config.js 是一个项目级别的配置,一般有了babel.config.js 就不会在去执行.babelrc的设置。 ...
  • vue.config.js

    2020-04-29 21:36:27
    前后端分离项目中存在跨域问题,故封装一个js来解决,且后面webscoket也是可以这样解决的,方便我们解决跨域问题
  • Vue—babel.config.js配置文件详解

    万次阅读 2021-01-04 15:43:36
    一、概述 Babel是一个JS编译器,主要作用是...Vue3.0项目根目录中存在babel.config.js文件,即为Babel的配置文件,作用于整个项目。具体用法暂时不多赘述,详情请参考Babel中文文档:https://www.babeljs.cn/。 ..
  • module.exports = { plugins: [ [ "import", { libraryName: "vant", libraryDirectory: "es", style: true, }, "vant", ], ], };
  • <div><p>I have a <code>babel.config.js</code> in the root of my project and it was perfectly loaded with Webpacker 5. <p>With Webpacker 6 the <code>babel.config.js</code> file is not loaded anymore. ...
  • .babelrc 和 .babel.config.js 相同配置不能进行合并 两个文件都是es6语法编译配置,用来将es6代码转换成浏览器能够识别的es5代码。 Babel的配置文件就是.babelrc,存放在根目录下。使用Babel的第一步,就是配置...
  • 无法写入文件“/babel.config.js”,因为它会覆盖输入文件。 无法写入文件“/babel.config.js”,因为它会覆盖输入文件。 无法写入文件“/babel.config.js”,因为它会覆盖输入文件。 百度了半天也没找到答案, 于是...
  • 项目内部已经有了babel的配置文件babel.config.js module.exports = { presets: ["@vue/app"], }; 然后由于要按需引入element-ui,就使用了babel-plugin-component,并且配置了.babelrc文件,如下(当然...
  • @ skypilot / babel-config-node-typescript SkyPilot使用TypeScript的Node项目的babel.config.js
  • 主要介绍了如何配置vue.config.js 处理static文件夹下的静态文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • babel-transform-config 如果您想以编程方式更新Nuxt或Next配置文件。 自述文件:wip 了解其作用的最简单方法: git clone https://github.com/hypervillain/babel-transform-config ; cd babel-transform-config...
  • webpack.config.js: const path = require('path') const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/main....
  • webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path = require('path'); let webpack = require('webpack');...
  • Babel插件,用于从tsconfig.json解析路径别名 安装 npm install -D babel-plugin-tsconfig-paths ... " .js " , " .jsx " , " .ts " , " .tsx " , " .es " , " .es6 " , " .mjs " ], " rootDir " :
  • 1.安装: npm i babel-polyfill -s 还有些网上的 “babel-polyfill” 是 npm i @babel/polyfill 不管怎么安装,之后引入的时候和安装的姿势(名称)一样就行 ...A:main.js引入 import "babel-po...
  • vue.config.js的优化配置

    2020-09-11 16:50:08
    需要新建文件’vue.config.js’,(这文件名是固定这么写的),与package.json在同一级目录下。 BundleAnalyzer 作用:展示打包图形化信息,会打开一个html页面,帮助自己分析哪些文件过大,可针对其进行优化,上线...
  • vue.config.js 是webpack的配置文件 vue.config.js是一个可选的配置文件,如果项目的 (和package.json同级的) 根目录中存在这个文件,那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段,...
  • module.exports = { ... //1.usage自动监测是否需要plolyfill 会根据@vue/babel-presset-app,通过@babel/preset-env(node-modle下@vue)和browserslist(package.js)监测项目是否需要 //2.entry强制...
  • 文章目录关于webpack.config.js文件没有的原因手动创建一个 vue.config.js没有配置vue.config.js之前,打包后的文件如下配置后 关于webpack.config.js文件没有的原因 Vue 项目中 vue.config.js 文件就等同于 ...
  • 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6、7 等版本的语法转化规则babel-polyfill: es6 内置方法和函数转化垫片babel-plugin-transform-runtime: 避免 polyfill 污染全局变量 ...
  • 在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误 最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,437
精华内容 13,774
关键字:

babel.config.js