babel

Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法

余生颓废 提交于 2020-10-01 13:48:12
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

Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

自作多情 提交于 2020-08-22 04:19:04
问题 I get a syntax error when trying to access .props for the both the RecipeList.js and Recipe.js. Here is a code sample for Recipe.js: import React, {Component} from 'react'; import "./Recipe.css"; class Recipe extends Component { // props: any; uncommenting this will fix the bug render() { // don't have to use return and parentheses for arrow with JSX const ingredients = this.props.ingredients.map((ing, ind) => ( <li key={ind}>{ing}</li> )); const {title, img, instructions} = this.props return

webpack的安装与基本使用

China☆狼群 提交于 2020-08-20 00:58:54
一、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 = { /

Vue-cli3配置全局环境变量

偶尔善良 提交于 2020-08-19 03:20:11
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按需引入去探索

我与影子孤独终老i 提交于 2020-08-18 10:06:23
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';