babel | 易学教程

[前端进阶课] 构建自己的 webpack 知识体系

阅读更多关于 [前端进阶课] 构建自己的 webpack 知识体系

webpack webpack 最出色的功能之一就是，除了 JavaScript ，还可以通过 loader 引入任何其他类型的文件。 Webpack 核心概念： Entry （入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Output （出口）：指示 webpack 如何去输出、以及在哪里输出 Module （模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 Chunk （代码块）：一个 Chunk 由多个模块组合而成，用于代码合并与分割。 Loader （模块转换器）：用于把模块原内容按照需求转换成新内容。 Plugin （扩展插件）：在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件，并改变输出结果配置项入口 Entry entry: { a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] }, 多入口可以通过 HtmlWebpackPlugin 分开注入 plugins: [ new HtmlWebpackPlugin({ chunks: ['a'], filename: 'test.html', template: 'src/assets/test

组件库实现按需引入的原理

阅读更多关于组件库实现按需引入的原理

前言已经有好长时间不在掘金冒泡了，当然也是事出有因，3月份动了一次手术，请了3个月的病假。做完手术就一直躺在床上玩switch，一直玩到现在，什么塞尔达传说，火焰纹章也在这段时间打通关了（其实我很想玩ps4，但是做起来费劲只能躺着玩掌机）。发生意外之前，在公司正着手准备做一个内部的ui库，于是就研究了一下一些开源的ui库的方案，这里做一个简单总结和分享。各个组件库是怎么做的？它们通常都会使用 webpack 或者 rollup 打包生成一个入口的js文件，这个文件通常都是在你不需要按需引入组件库时使用。比如 iview 组件库中的 dist 目录下的 iview.js 文件。 import ViewUI from 'view-design' ; // 引入了整个js文件，里面可能包含了一些你不需要的组件的代码 Vue.use(ViewUI); 复制代码再比如 rsuite 组件库中 lib 目录下的 index.js 文件。 // 即使你没有使用其他组件，也会引入一整个js文件 import { Button } from 'rsuite' ; function App ( ) { return < Button > Hello World </ Button > ; } 复制代码如果我们不需要引入全部的组件，我们首先就不能将组件的代码，打包到一个js文件中

npm运行项目报错----Cannot find module '@babel/compat-data/corejs3-shipped-proposals'

阅读更多关于 npm运行项目报错----Cannot find module '@babel/compat-data/corejs3-shipped-proposals'

第一种方法： package.json中devDependencies对象添加 "@babel/compat-data": "7.9.0" 第二种方法： npm install -D babel-loader @babel/core @babel/preset-env webpack 再启动来源： oschina 链接： https://my.oschina.net/u/4301161/blog/4326069

简单的react示例

阅读更多关于简单的react示例

自留 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel" src="patient.jsx"></script> <script type="text/babel" src="page.jsx"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <Page />, document.getElementById(

Vue 在ie下的兼容

阅读更多关于 Vue 在ie下的兼容

https://www.jianshu.com/p/35c85b10cade 说到底还是es6闹得，ie浏览器不支持es6 实际碰到的问题分两步才解决 1. 直接打开是空白页：让ie支持vue 解决方式：安装 "babel-polyfill" 即可。命令：cnpm install --save-dev babel-polyfill //我用的是淘宝镜像，所以是cnpm，如果你没有安装使用npm 即可。在入口main.js文件引入：import 'babel-polyfill' 最后一步，在build文件夹下找到webpack.base.conf.js. 将第10行的内容替换一下即可。 https://blog.csdn.net/weixin_44093149/article/details/99569736 使用vue-cli3创建的项目，在谷歌浏览器运行没有问题，但在火狐浏览器、ie浏览器和edge浏览器上运行都会报错（就测试了这几个浏览器，其它的没测），具体报错内容如下： // 火狐浏览器报错如下 "载入页面时与 ws://localhost:8080/sockjs-node/631/u0rsdsy0/websocket 的连接中断" // ie浏览器报以下错误 SCRIPT5022: SecurityError sockjs.js ( 1683,3 ) //

Exporting angularjs module as es6 module

阅读更多关于 Exporting angularjs module as es6 module

问题 You are supposed to wrap angularjs modules in an IIFE according to the styleguide, which we use https://github.com/johnpapa/angular-styleguide/tree/master/a1#iife my-dir.js (function() { 'use strict'; angular .module('my.dir', []) .controller('MyDirController', MyDirController), .directive('my-dir', MyDirDirective); function MyDirController() { } function MyDirDirective() { return { restrict: 'E', controller: MyDirController } } })(); app.js (function() { 'use strict'; angular .module('app',

Why Babel 7 uses require() function for browser which knows nothing about it?

阅读更多关于 Why Babel 7 uses require() function for browser which knows nothing about it?

问题 I try to use d3.js in my module. I use Babel 7 for transpiling my code sources. This is my package.json : { "name": "d3_learning", "version": "1.0.0", "description": "", "main": "index.js", "directories": { "test": "test" }, "scripts": { "build": "babel src --out-dir dist --source-maps --minified --no-comments", "build:watch": "npm run build -- -w" }, "babel": { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "targets": { "firefox": "64", "opera": "57", "chrome": "71", "edge":

Why Babel 7 uses require() function for browser which knows nothing about it?

阅读更多关于 Why Babel 7 uses require() function for browser which knows nothing about it?

babel arrow functions error in node_modules

阅读更多关于 babel arrow functions error in node_modules

问题 when i want build react the bellow error appear(error in node_modules): ERROR in ./node_modules/react-native-video/Video.js 54:7 Module parse failed: Unexpected token (54:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | } | > seek = (time, tolerance = 100) => { | if (isNaN(time)) throw new Error('Specified time is not a number'); And i add this section to babel file babel

Remove some code lines in production distribution files?

阅读更多关于 Remove some code lines in production distribution files?

问题 I'm using Babel and Webpack to generate ES5 code from ES6 . There are some validations that is used to reduce the mistakes i do while coding. class Logger { /** * @param {LogModel} info * {LogTypes} type * {String} message * {Date} date */ static log(info) { if(info instanceof LogModel) throw new Error("not a instance of LogModel"); notify(info); } } In log function, I validate whether the argument is a instance of LogModel class. This is just to prevent mistakes. I don't want that if

订阅 babel