《猛戳-查看个人博客地图-总有你意想不到的惊喜》
本文内容:babel相关知识javascript
Babel is a JavaScript compiler.java
babel 6 | babel 7 |
---|---|
- | @babel/core Core Library |
- | @babel/cli CLI tool ,use babel from the terminal |
babel-preset-react Babel preset for all React plugins. |
@babel/preset-env Without any configuration, this preset will include all plugins to support modern JavaScript |
- | @babel/polyfill别名@babel/runtime-corejs2,旧浏览器内核不支持高级API(如Promise、import())时,polyfill向顶层对象添加Promise执行的环境 |
- | @babel/preset-reactBabel preset for all React plugins.好比react-dom-router |
babel-plugin-transform-class-properties | @babel/plugin-proposal-class-properties解析类的属性 |
babel-plugin-syntax-dynamic-import | @babel/plugin-syntax-dynamic-import |
- | @babel/plugin-transform-arrow-functions To transform ES2015+ syntax into ES5 |
- | @babel/plugin-transform-runtime |
- | @babel/plugin-transform-object-assign编译 Object.assign |
- | @babel/plugin-proposal-decorators装饰器 |
ES2015转码规则
,babel-preset-reactreact转码规则
ES7不一样阶段语法提案的转码规则(共有4个阶段),选装一个
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3jquery
.babelrc
和babel.config.js
文件须要放在项目根目录,即和/node_modules/在同一目录第一种:使用.babelrcwebpack
{ "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@babel/plugin-syntax-dynamic-import"] }
第二种:在package.json内部设置babelweb
{ "dependencies": { "jquery": "^3.3.1", "react": "^16.6.3", "react-dom": "^16.6.3", "react-router-dom": "^4.3.1", }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.4", }, "babel":{ "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@babel/plugin-syntax-dynamic-import"] } }
第三种:在webpack中配置babeljson
module.exports = { module:{ rules:[ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ["@babel/preset-env", "@babel/preset-react"], //babelrc: false,// 不采用.babelrc的配置 } } } ] } }
第四种:配置babel.config.js浏览器
module.exports = { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@babel/plugin-syntax-dynamic-import"] };
感谢阅读,欢迎评论^-^babel
打赏我吧^-^