在开发中引用插件时,报错“exports is not defined” 但在引用第三方组件的时候,在浏览器中报错“exports is not defined”.根据浏览器报错信息,查询到报错来源是第三方组件的一段代码: 经过查资料,这是使用了CommonJs写法,而在应用中并没有做相应的模块转换使得浏览器能够识别.而导致这个问题是因为balbel的配置文件.babelrc的问题: 需要改动.babelrc文件即可: 其中{ "modules": false }阻止了babel进行模

在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3+TypeScript+ElementPus的前端工作流模块中实现统一的表单编辑和表单详情查看处理. 1.查看申请单的模块设计处理 在工作流处理表中,首先我们区分流程模板和流程实例两个部分,这个其实就是类似模板和具体文档的概念,我们一份模板可以创建很多个类似的文档,文档样式结构类似的.同理,流程模板实例为流程实例后,就是具体的

很多时候我们使用别人的库,都是通过 npm install,再简单的引入,就可以使用了.     1 2 import React from 'react' import { connect } from 'react-redux' 那如果我们自己写的组件库和工具 utils 类怎么办?如果你不熟悉别名的概念,通常会引入相对路径,它会变成这样.     1 2 3 import { someConstant } from './../../config/constants' import MyC

抽象语法树 什么是抽象语法树? It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code. 抽象语法树是源代码语法结构的一种抽象表示.它以树状的形式表现编程语言的语法结构,树上的每个节点

前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要特定的 loader去解析它们. css-loader: 解析css文件并且支持@import()等引入css模块 style-loader: 通过插入 <style> 标记将CSS添加到DOM中 webpack 处理loader的是 module{}, 不要写成 loader: {} rules

import time t = time.time() #获取目前时间 t_struck = time.localtime(t) #time.gmtime() utc时区 t_str = time.strftime('%Y-%m-%d %H %M %S',t_struck)#从struck转化成年月日 t_struck2 = time.strptime('2017-05-06','%Y-%m-%d') #转化struck模式 t2 = time.mktime(t_struck2) #转化成时间戳

vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "comments&

代码:github 一.webpack4--基本配置 这一部分通过webpack的基本配置,使用loader对图片和样式进行打包,从而了解webpack4简单的用方法,保证自己能够配置正确,提升学习动力. 1.初始化配置 mkdir webpack4 cd webpack4 mkdir demo1 cd demo1 npm init -y 或 npm init 目录结构 webpack4 ├── webpack4/demo1 │   └── webpack4/demo1/package.json

下面我们来配置下webpack4+react的开发环境,之前都是针对webpack4+vue的.下面我们也是在之前项目结构的基础之上进行配置下. 首先看下如下是我为 webpack4+react 基本的项目结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---src | | | |-- index.jsx # 项目的入口文件jsx | | | |

深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的目录结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---index | | | |-- views # 存放所有vue页面文件 | | | |--

阅读目录 1. 什么是tree-shaking? 2. 在webpack中如何使用 tree-shaking 呢? 3. 使用webpack-deep-scope-plugin 优化 回到顶部 1. 什么是tree-shaking? 在webpack中,tree-shaking的作用是可以剔除js中用不上的代码,但是它依赖的是静态的ES6的模块语法.也就是说没有被引用到的模块它是不会被打包进来的,可以减少我们的包的大小,减少文件的加载时间,提高用户体验. webpack2版本中就开始引入了 tr

webpack4.0优化那些事儿 一 缩小文件搜索范围 1 include & exclude 1) action 限制编译范围 2) useage module: { rules: [ { test: /\.js$/, use: ['babel-loader?cacheDirectory'], include: path.resolve(__dirname, 'src'), exclude: /node_modules/ } ] } 'babel-loader?cacheDirectory'

1.缩小文件搜索范围 1.1.1 include & exclude module:{ rules:[ { test:/\.js$/, use:['babel-loader?cacheDirectory'], include:path.resolve(__dirname,'src'), exclude:/node_modules/ } ] } 1.1.2 resolve.modules resolve: { modules: [path.resolve(__dirname, 'node_modu

Tree-shaking 字面意思就是 摇晃树, 其实就是去除那些引用的但却没有使用的代码. Tree-shaking 概念最早由 Rollup.js 提出,后来在 webpack2 中被引入进来,但是这个这一特性能够被支持得益于 ES6 modules 的静态特性.ES6 的模块声明相比于传统 CommonJS 的同步 require 有着本质区别.这种 modules 设计保证了依赖关系是提前确定的,使得静态分析成为了可能,与运行时无关. 并且 webpack 中并没有直接对 tree sh

ngx_http_access_module ngx_http_access_module模块允许限制对某些客户端地址的访问. 访问也可以通过密码,子请求的结果或JWT来限制. 通过地址和密码的同时访问限制由满足指令控制. allow Syntax: allow address | CIDR | unix: | all; Default: - Context: http, server, location, limit_except 允许访问指定的网络或地址. deny Syntax: deny

babel 基本使用 安装转码规则 # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-st

在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es3/5代码. 以.babelrc文件配置babel为例,presets预设编译规则(预设的编译插件集合)可以设置stage-0 至 stage-3, stage-0包含了stage-1 至 stage-3,也就是说如果设置为stage-0,stage-1 至 stage-3的编译功能默认都有了. stage-0 至

一.配置文件.babelrc .babelrc 文件存放在项目的根目录下. { "presets": [], "plugins": [] } presets 字段设定转码规则,你可以根据需要安装. $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个,其中0

从前,一提到新东西,我的反应就是兼容性好不好,如果不能满足产品经理的需求,就还是用保守的方式实现吧.毕竟前端开发是一件很灵活的事,怎么写都行,至于为何会用某种方法,一定是综合考虑兼容性,性能,用户体验,开发成本等因素后再说.兼容性和新事物有时就像鱼和熊掌不可兼得,必须权衡利弊,做一个决断.但是ECMAScript 2015不一定要等所有浏览器都支持后才可以用,于是你会想到一个工具babel,它可以助ECMAScript 2015一臂之力,让处于某个stage的且尚未纳入es规范的特性提前支持,因

阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写js代码更加得心应手,比如class,let,for...of promise等等这样的,但是可惜的是这些js新特性只被最新版本的浏览器支持,但是低版本浏览器并不支持,那么低版本浏览