ES6 import代码智能转换Babel插件: babel-plugin-imports-transform

最新推荐文章于 2021-09-23 15:08:16 发布
最新推荐文章于 2021-09-23 15:08:16 发布
阅读量727 收藏
点赞数
文章标签： json webpack ViewUI
原文链接：https://segmentfault.com/a/1190000010787241
版权
babel-plugin-imports-transform 是一个ES6 import代码转换Babel插件，旨在优化webpack等构建工具的包体积。通过智能转换，只引入所需的部分模块而非整个库，减少代码包大小。支持style属性自动引入对应样式文件，并可通过自定义js文件实现高级转换功能。
摘要由CSDN通过智能技术生成

babel-plugin-imports-transform

ES6 import代码智能转换Babel插件，优化(webpack等)打包构建体积。

Github地址: https://github.com/abell12345...

分为两种情形使用：index.js文件作为Babel插件来使用，而index-transform.js可以在js代码中单独调用函数来使用。

会将下面的import代码:

    import { Row, Grid as MyGrid } from 'react-bootstrap';
    import { merge } from 'lodash';

转化为引入单个对应文件:

    import Row from 'react-bootstrap/lib/Row';
    import MyGrid from 'react-bootstrap/lib/Grid';
    import merge from 'lodash/merge';

为什么要这么做？

当Babel遇到下面的模块引入代码的时候:

    import { Grid, Row, Col } from 'react-bootstrap';

它会简单的把上面的代码编译为下面的代码:




                

        

        




    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  lyuharvey
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Babel——ES6转换

				
			

			

				

					weixin_40821790的博客
				

				

					12-01
					
					2591
					
				

			

		

		

			
				
1. 在线转换 https://babeljs.cn/ 
2. 手动转换  
        首先 npm -init**1）配置.Babelrc文件** 
{
  "presets": ["latest"],
  "plugins": []
}
// es2015转码规则
npm install --save-dev babel-preset-es2015// react转码规则
npm inst

			
		

	



                

              
                



	

		

			

				
					
babel-plugin-my-import:像babel-plugin-transform-imports这样的babel插件

				
			

			

				

					05-09
				

			

		

		

			
				
babel-plugin-my-import
write by Hydrogen, 2018.6
介绍
实现组件库/工具库的按需加载，类似 babel-plugin-transform-imports 和 babel-plugin-import
我不会发布这个插件到 npm，实际生产请使用上述两个插件之一
使用
独立使用
const babel = require("@babel/core")
const trans = babel.transformFileSync('yourfile.jsx', {
  plugins:[
    [require("./index"), { "library": "@alipay/antd-cloud", "libPath": "lib" }]
  ]
})
console.log(trans.code)
在 .babelrc (babel 7) 中

			
		

	



                


  
              

                


	

		

			

				
					
通过 Babel 使用 ES6 的 import

				
			

			

				

					测试
				

				

					09-22
					
					913
					
				

			

		

		

			
				
在《Modules with CommonJS》一文中，我们通过类似于 Python 的 import 方式，把我们的代码组织成模块。那篇文章展示了 NodeJS 的原生模块系统 – CommonJS。同时，文章还阐述了在那些不支持模块和模块加载器的浏览器中，如何使用 Webpack 去解决这种兼容性问题。在本文中，我们将会看到一个不同的 import 系统，这个系统基于最新的 JavaScrip...

			
		

	





	

		

			

				
					
babel import语法 js_通过 Babel 使用 ES6 的 import

				
			

			

				

					weixin_32252271的博客
				

				

					12-24
					
					624
					
				

			

		

		

			
				
在《Modules with CommonJS》一文中，我们通过类似于 Python 的 import 方式，把我们的代码组织成模块。那篇文章展示了 NodeJS 的原生模块系统 – CommonJS。同时，文章还阐述了在那些不支持模块和模块加载器的浏览器中，如何使用 Webpack 去解决这种兼容性问题。在本文中，我们将会看到一个不同的 import 系统，这个系统基于最新的 JavaScrip...

			
		

	



		

			
		



	

		

			

				
					
webpack babel-loader转换es6+用到的库、插件及配置

				
			

			

				

					u010234868的专栏
				

				

					09-23
					
					517
					
				

			

		

		

			
				
安装babel-core、babel-loader、babel-preset-env、babel-plugin-transform-runtime：


cnpm i babel-core@6.26.3 babel-loader@7.1.5 babel-preset-env@1.7.0 babel-plugin-transform-runtime@6.23.0 -D

babel-core：Babel编译器的核心；

babel-loader：用于webpack的一个loader，babel-core依赖.

			
		

	





	

		

			

				
					
babel-plugin-search-and-replace：一个小的babel插件来搜索字符串并替换它们

				
			

			

				

					01-31
				

			

		

		

			
				
babel插件的搜索和替换
它能做什么 ？
 它替换您在babel运行时选择的字符串
如何使用它 ？
 yarn add babel-plugin-search-and-replace -DE或npm i babel-plugin-search-and-replace --save-dev --exact
 在.babelrc中添加以下行
{
  " plugins " : [
    [
      " search-and-replace " ,
      {
        " rules " : [
          {
            " search " : " searchedString " ,
            " searchTemplateStrings " : true ,
            " replace " : " replacement "
          },
          {
            " search " : /myRegex/ ,
            " replace " : " repla

			
		

	





	

		

			

				
					
eslint-plugin-organize-imports：eslint插件，用于强制执行订单，对进口分组和注释（如果需要）

				
			

			

				

					01-30
				

			

		

		

			
				
eslint-plugin-organize-imports：  eslint插件，用于将相似模块进行分组以及这些组的关联注释和顺序。...pathAliases （可选）以支持诸如babel-plugin-module-alias以及其他任何webpack插件之类的用例，这些用例会

			
		

	





	

		

			

				
					
react-workflow-updated-2018：这是2017年9月28日的我的ReactNYC演示的第二版，标题为React Workflows Without Create React App。 由使用香草JavaSscript创建的Reveal.js演示文稿平台制成。 它整合了对React 16.6 +，ESLint 5.9.0，Babel 7和webpack 4+所做的更改

				
			

			

				

					02-05
				

			

		

		

			
				
不创建React App（CRA）的React工作流程 更新于2018年11月28日 请注意工作流程中出现的src / favicon.ico问题：  我做了一个快速更改以摆脱src文件夹。 我没有将favicon.ico注入... 结果？ 没有更多的src文件夹。...注意

			
		

	





	

		

			

				
					
Babel V7 学习总结

				
			

			

				

					LI-Jiacong的博客
				

				

					01-20
					
					484
					
				

			

		

		

			
				
babel工作流

输入字符串 -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator ->

			
		

	





	

		

			

				
					
babel-plugin-transform-require-image-to-url:转换图像资产的Babel插件需要url

				
			

			

				

					05-07
				

			

		

		

			
				
babel-plugin-transform-require-image-url
一个用于转换require Quote的图片资源为url的babel插件
示例
const image = require ( '../path/image.png' ) ;
< img xss=removed>
      ↓ ↓ ↓ ↓ ↓ ↓
const image = 'https://cdn.com/image.1ms2.png' ;
< img xss=removed>
安装
npm install babel-plugin-transform-require-image-to-url --save-dev
# or
yarn add -D babel-plugin

			
		

	





	

		

			

				
					
babel-plugin-transform-rename-import:重命名进口并要求

				
			

			

				

					05-13
				

			

		

		

			
				
babel-plugin-transform-rename-import
 取代进口货源
安装
$ npm install --save babel-plugin-transform-rename-import
巴别尔克
{
  "plugins" : [ [ "transform-rename-import" , { original : 'assert' , replacement : 'power-assert' } ] ]
}
 或多次替换：
 {
  "plugins" : [
    [ "transform-rename-import" , {
      replacements : [
        { original : 'replace-me' , replacement : 'replaced' } ,
        { original : 'replace

			
		

	





	

		

			

				
					
babel-plugin-transform-remove-imports：使用babel转换构建软件包时，删除指定的导入声明

				
			

			

				

					01-31
				

			

		

		

			
				
babel-plugin-transform-remove-imports
 用于babel的模块化导入插件，用于服务器端渲染。 也适用于cjs删除导入CSS，以避免编译错误。
用法
npm install babel-plugin-transform-remove-imports --save-dev
 通过.babelrc或babel-loader 。 
{
  " plugins " : [
    [
      " babel-plugin-transform-remove-imports " , {
        " test " : " \\ .(less|css)$ "
      }
    ]
  ]
}
 // Input Code
import './index.less' ;
import './index.main.less' ;
import { Button } from 'uiw' ;
import { Select } from '@uiw/core' ;
// Output   ↓ ↓ ↓ ↓ ↓ ↓
import { Button } from

			
		

	





	

		

			

				
					
create-react-app 使用技巧及源码分析

				
			

			

				

					止水聊技术
				

				

					10-10
					
					1049
					
				

			

		

		

			
				
现在大部分 react 项目都是基于 create-react-app 初始化的，对于普通的项目，使用默认的 webpack 配置完全够用。今天讲讲 create-rea...

			
		

	





	

		

			

				
					
python从入门到精通——模块11

				
			

			

				

					cyl16688
				

				

					11-06
					
					128
					
				

			

		

		

			
				
一，模块概述
二，自定义模块
三，Python中的包
四，引用其他模块



			
		

	





	

		

			

				
					
干货 | 减少50%空间，携程机票React Native Bundle 分析与优化

				
			

			

				

					携程技术
				

				

					04-15
					
					636
					
				

			

		

		

			
				
作者简介Sheila，携程资深前端开发工程师，关注前端性能优化；xqin，携程前端开发专家，CRN bundle分析平台开发者。一、前言在业务迭代上线的过程中，往往会出现一些代码冗余，导...

			
		

	





	

		

			

				
					
webpack 打包第三方库_使用Webpack优化你的第三方库

				
			

			

				

					weixin_36391538的博客
				

				

					01-11
					
					607
					
				

			

		

		

			
				
在webpack项目中使用了第三方库？使用这些方法可以缩小bundle！asyncasync是一组用于处理异步函数的实用程序。通常，您应该使用async-es。它随ES模块一起提供，并且更适合webpack打包。尽管如此，即使更喜欢使用async，对于优化列表，请参阅async-es部分。async-esasync-es是一组用于处理异步函数的实用程序。它与async相同，但它更适合webpack...

			
		

	





	

		

			

				
					
babel-plugin-import不生效的问题

					
热门推荐

				
			

			

				

					有姿态的北漂的博客
				

				

					03-10
					
					1万+
					
				

			

		

		

			
				
问题描述：
使用create-react-app生成项目，然后eject，然后安装了antd和babel-plugin-import依赖包，按antd官网的说明在babelrc里面加了配置：
{
"plugins": [
["import", { libraryName: "antd", style: "css" }]
]
}
大概2016年10月份按这个流程构建的项目，是没有任何问

			
		

	





	

		

			

				
					
你不容错过的babel-plugin-import史上最全源码详解！

				
			

			

				

					a958014226的博客
				

				

					03-31
					
					1338
					
				

			

		

		

			
				
本文将带领大家解析babel-plugin-import 实现按需加载的完整流程，解开业界所认可 babel 插件的面纱。

首先供上babel-plugin-import插件

一、初见萌芽

首先 babel-plugin-import 是为了解决在打包过程中把项目中引用到的外部组件或功能库全量打包，从而导致编译结束后包容量过大的问题，如下图所示：



babel-plugin-import 插件源码由两个文件构成

Index 文件即是插件入口初始化的文件，也是笔者在 Step1 中着重说明的...

			
		

	





	

		

			

				
					
@babel/plugin-transform-async-to-generator怎么配置

					
最新发布

				
			

			

				

					08-05
				

			

		

		

			
				
@babel/plugin-transform-async-to-generator是一个Babel插件，用于将ES7中的`async/await`转换为ES6中的生成器函数。要配置该插件，您需要按照以下步骤进行操作：  1. 首先，安装插件，通过运行以下命令：`npm ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值