babel

Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法 参考文章： （1）Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法 （2）https://www.cnblogs.com/jiebba/p/9618930.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4438370/blog/4539441

一、webpack的基本配置 运行 npm install webpack webpack-cli -D 命令安装webpack 相关的包 在项目的根目录中，创建名为webpack.config.js的webpack配置文件 在webpack的配置文件中，初始化如下基本配置： module.exports={ //编译模式 mode:'development' //development表示开发阶段 production表示生产阶段 } 1 2 3 4 在package.json配置文件中的scrpts节点下，新增dev脚本如下： "scripts":{ //script节点下的脚本，可以通过npm run执行 "dev":"webpack" } 1 2 3 在终端中运行npm run dev命令，启动webpack进行项目打包 二、webpack的基本使用 1.配置webpack打包的入口与出口 在webpack的4.x版本中默认约定：打包的入口文件时src目录下的index.js，打包的输出文件是dist目录下的main.js，如果要修改打包的入口与出口，可以在webpack.config.js中配置如下信息： const path = require('path')//导入node.js中的path模块用来获取当前目录的绝对路径 module.exports = { /

1.根目录下创建.env文件，里面可以用key=value的形式设置全局变量 2.全局变量的名字也就是key必须以VUE_APP_*的格式命名，也就是以VUE_APP_作为开头，例如VUE_APP_RESOURCE_URL。 3.如果要配置根据不同环境引入静态资源的url不同，则需要在根目录下创建两个以.env.开头的文件，示例 开发环境.env.dev文件 生产环境.env.prod 4.在package.json中配置命令 5.这样就可以在index.html中使用全局变量 采坑：（因为配置的全局变量也是在网上找的，不知道用途，所以就造成了以下错误~） VUE_CLI_BABEL_TRANSPILE_MODULES = false/true 在.env.dev中使用了这个变量之后，执行命令npm run dev，引入的elementUI部分组件一直报错，好像是按需加载的模式 删掉之后神奇的没有报错了，不知道什么原因，希望有大佬帮忙解答，感谢！！！ 来源： oschina 链接： https://my.oschina.net/u/3850274/blog/4290519

element-ui的按需引入的配置： 文档地址 npm install babel-plugin-component -D { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } import Vue from 'vue'; import { Button, Select } from 'element-ui'; import App from './App.vue'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); 三步下来就能方便的使用按需引入的功能了。 其中的原理是什么？babel-plugin-component在其中做了什么？ 探究处理过程 首先新建一个demo，使用最简化的配置， demo地址 。 demo中只用了四种钩子： Program:第一个访问的节点，初始化数据。 ImportDeclaration：处理import import { Button, Select } from 'element-ui';