• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

如何设置前端编译工具babel的配置_vue

当前位置：网站建设 > 技术支持

如何设置前端编译工具babel的配置？

在使用babel之前，我们一般需要设置一些配置，那么babel有哪些地方可以设置配置呢？

我们以@babel/core中的transform方法为例

var babel = require('@babel/core');

let code = `var a: string = "";`;

const result = babel.transform(code, {

babelrc: true,

caller: {

name: "my-custom-tool",

supportsStaticESM: true

},

test: function(path, obj) {

return true;

},

filename: 'index.js',

// extends: 'ajv'

// configFile: 'babelrc'

parserOpts: {

plugins: ['typescript']

},

plugins: [],

presets: []

});

这个配置很重要，因为后面的一些配置文件是根据这里的配置寻址的，如果这里不配置，后面的配置文件可能找不到，我们可能把它当做基础配置。

前端编译器babel

配置configFile有两种情况：

1、如果不配置（configFile!==false）

babel会自动在工程的根目录下寻找一个babel.config.js文件，那么我们就可以在这个文件中配置

2、如果configFile是一个字符串，字符串会被当做包名，那么babel就会在进程运行目录下寻找这个包，这个包就可以当做配置。

使用pkgjson的前提是在基础配置中设置filename属性，因为babel是以filename所在目录一层层向上寻找pkgjson的，找到的第一个pkgjson就被用来当做配置（和node寻找node_modules一样）。

我们可以在pkgjson中设置babel字段属性，在这个属性中我们可以设置babel的配置。

babel在寻址pkgjson文件时会记录向上寻找的每一个层级目录（直到找pkgjson那一层），那么在这些层级目录中可以配置.babelrc和.babelrc.js文件

有三点需要注意：

1、每一层只能配置一个文件，两个都配置会报错，会让你移除一个

2、只会使用寻址到的第一个配置文件，其他的就会被忽略

3、上面的pkgjson中的配置和这里的配置也是二选一，否则也会报错

另外在每个层级下还可以配置.babelignore，和上面一样只取寻址到的第一个

上面每个配置文件都可以设置env和overrides两个属性

babel可以根据运行环境env配置

module.exports = function(cache) {

let env = cache.env;

env();

return {

presets: ['@babel/env'],

plugins: [

['@babel/transform-react-jsx', {

a: 1

}, 'test'],

['@babel/ala', {

b: 2

}]

],

passPerPreset: true

env : {

development: {

presets: [],

plugins: []

},

production: {

presets: [],

plugins: []

}

},

overrides: []

};

}

也可以在overrides中配置，这个属性是个数组，数组每个元素中又可以配置env。

总结

babel运行的时候会把上面每个配置都走一遍，最终会把寻找到的所有配置合在一起！

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。