babel | 易学教程

Dynamic Imports for Code Splitting cause: ESLint Parsing Error 'import'

阅读更多关于 Dynamic Imports for Code Splitting cause: ESLint Parsing Error 'import'

问题 I'm using the VueJS Webpack template found here: https://github.com/vuejs-templates/webpack Example Route: const AuthRoute = () => import(/* webpackChunkName: "authroute" */ './AuthRoute.vue') Example Error: [eslint] Parsing error: Unexpected token import I've followed the steps provided in Webpack's Dynamic import section, as well as Anthony Gore's blog post on how to accomplish code splitting with VueJS at the router level. More specifically, here is my setup: Package.json ... "babel-core":

3实战篇 02：项目脚手架

阅读更多关于 3实战篇 02：项目脚手架

实战篇 02：项目脚手架本节参考代码： react-boilerplate 经过了刀耕火种的插件化时代，伴随着越来越繁荣的 npm 生态，近几年来前端开发的三大件 HTML、CSS 及 JavaScript 都发生了不同程度上的进化，这也让开发或选择一个合适的项目脚手架（boilerplate）成为了前端项目的第一个难点。在 React 生态中，虽然已经有了像 create-react-app 这样官方指定的脚手架项目，但为了深入理解一个前端脚手架所需要承担的责任与能够解决的问题，不妨让我们删繁就简一起来搭建一个只包含最少依赖的功能齐全的项目脚手架。 HTML 部分在 JavaScript 框架接管了所有 DOM 相关的操作与更新后，HTML 方面的工作量就大量地减少了，很多时候只需要为框架提供一个可以注入 DOM 元素的根节点即可。 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > </ head > < body > < div id = " app " > </ div > </ body > </ html > 为了让页面的缩放比例与当前用户设备的屏幕尺寸保持一致，我们可以在模板中添加 HTML5 新引入的 viewport 属性，这对于需要支持移动端的项目非常重要。 < meta name =

3实战篇 02：项目脚手架

阅读更多关于 3实战篇 02：项目脚手架

babel版本问题

阅读更多关于 babel版本问题

使用babel将高级语法转换为低级语法时，需要安装两套包： //第一套包 cnpm install babel-core babel-loader babel-plugin-transform-runtime -D //第二套包 cnpm install babel-preset-env babel-preset-stage-0 -D 然后在配置文件webpack.config.js中添加一条rules: {test: /\.js|jsx$/, use:'babel-loader', exclude: /node_modules/} //注意：在配置babel-loader时，一定要加上exclude: /node_modules/，否则整个项目会报错在项目根目录中，新建一个叫做 .babelrc 的babel 配置文件,这个配置文件属于JSON格式，内容如下： { "presets": ["env","stage-0"], "plugins":["transform-runtime"] } 但是在打包的过程中出现以下错误，上网查了之后说是babel的版本问题，不能按之前的安装命令来安装babel包具体修改如下： 1.重新安装babel的两套包： //第一套包 cnpm install @babel/core babel-loader @babel/plugin

webpack的js编译

阅读更多关于 webpack的js编译

webpack来来回回学了几次了。这一次获得了新的东西。编译es6. 需要的loader：c npm i babel-loader @babel/core -D 但是在js文件中写es6语法（比如箭头函数），编译出来的结果依然维持着箭头函数本身。没有对es6语法进行编译。这是因为，没有告知webpack，需要将js编译成es6，es5还是其它。所以需要安装： cnpm i @babel/preset-env -D webpack.config.js的配置：针对浏览器为目标： { test:/\.js$/, use:{ loader:'babel-loader', options:{ presets:[ ['@babel/preset-env',{ targets:{ browsers:['>1%']//市场占有率>1% } }] ] } } }, 针对node版本的配置 { "presets": [ ["@babel/preset-env", { "targets": { "node": "8.9.3" } }] ] } 针对特定浏览器配置： { "presets": [ ["env", { "targets": { "browsers": "ie 11" } }] ] } 在上面的babel配置中，babel只是将一些es6，es7-8的语法转换成符合目标的js代码

Extracting Javascript gettext messages using Babel CLI extractor

阅读更多关于 Extracting Javascript gettext messages using Babel CLI extractor

问题 It is stated here that Babel can extract gettext messages for Python and Javascript files. Babel comes with a few builtin extractors: python (which extracts messages from Python source files), javascript, and ignore (which extracts nothing). The command line extractor is documented here - but with no examples on usage. Also in the same pointer above, there is some mention of a config file to be used with extraction, but not much expanded on. When I run the basic command for the extractor on a

记一次vue采坑 npm run dev 过程:component: () => import() 出现错误

阅读更多关于记一次vue采坑 npm run dev 过程:component: () => import() 出现错误

第一次接触VUE，今天为了跑通公司项目，着实费了不少劲。主要起因是命令： npm run dev 在编译过程中报错：Syntax Error: Unexpected token (4:19) 原来是import这儿报错了，这就需要babel的插件了，vue-router官网上有一段提示：如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。运行命令： npm install babel-plugin-syntax-dynamic-import --save-dev 然后修改webpack的js的loader部分： { test: /\.js$/, loader:'babel-loader', options:{ plugins:['syntax-dynamic-import'] }, }, 增加了option选项，至此，能识别我们： const App = () => import ( '../component/Login.vue' );的语法。我的代码是从gitlab clone下来的，执行 npm install npm run dev 这时报错 Error: No PostCSS Config found in... 解决方案在项目根目录新建 postcss.config.js 文件

Why won't Babel transform my class properties?

阅读更多关于 Why won't Babel transform my class properties?

问题 I have the following person.js export class Person { firstName = "" lastName = "" middleName = "Nothing" constructor(first, last){ this.firstName = first; this.lastName = last; } get fullName() { return this.firstName + " " + this.middleName + " " + this.lastName; } } Whenever I try to run Webpack, I get a syntax error pointing to the first equal sign between firstName and the double quotes. If I remove all the properties before the constructor, everything works fine (although I have to

Yarn Workspaces and Browserify - package.json in subfolder breaks the build

阅读更多关于 Yarn Workspaces and Browserify - package.json in subfolder breaks the build

问题 My ultimate goal is to use Yarn Workspaces in a project using Browserify and Babel 7. This is a minimal reproduction of a problem I'm having. Basically it seems that the presence of a package.json file in a subfolder (which is one of the things that you have when using Yarn Workspaces) breaks my Browserify build, and I can't figure out why. Here's a GitHub repo with a minimal reproduction of the problem. First, install the dependencies (you can use yarn or npm, doesn't matter): $ npm install

(_.merge in ES6/ES7)Object.assign without overriding undefined values

阅读更多关于 (_.merge in ES6/ES7)Object.assign without overriding undefined values

问题 There is _.merge functionality in lodash. I want to achieve the same thing in ES6 or ES7. Having this snippet: Object.assign({}, {key: 2}, {key: undefined}) I want to receive {key: 2} . Currently I receive {key: undefined} This is NOT a deep merge. Is it possible? If yes then how to achieve that? 回答1: You can't achieve that with a straight usage of Object.assign , because each next object will rewrite the same keys for prev merge. The only way, to filter your incoming objects with some hand

订阅 babel