blog's People
blog's Issues
测试环境安卓低版本手机白屏的问题
背景:我们的网站是跑在app内的webview,测试手机(安卓6,chrome版本42,以下简称手机)无法打开本地环境
控制台报错:
unexpected token =>
这个很好理解,因为箭头函数属于es6的语法,在chrome42里面并不支持,但是我的代码应该通过babel编译了才对,所以我去寻找babel的配置
研究了一圈,发现babel的@babel/preset-env
就是会根据browserslist
来配置你的polyfill。而我的browserlist长这样:
"browserslist": {
"production": [
"chrome 39",
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
原因就是babel会根据BABEL_ENV || NODE_ENV来判断环境。所以这里我改成:
"browserslist": [
"chrome 39",
">0.2%",
"not dead",
"not op_mini all"
],
试下来还是不行,弄了好久,最后发现是babel-loader设置了缓存= =
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
删掉缓存之后。查看代码发现自己的代码箭头函数已经都转义了,但是还是有一些代码里面有箭头函数,查看了下是node_modules里面代码。
下一个问题就是如何让node_modules里面代码也经过babel转码。
首先找到babel-loader的配置,把include改成包含 src 以及node_modules, 还需要注意你babel配置文件的写法,babel7现在分为Project-wide configuration跟File-relative configuration, 具体见 https://babeljs.io/docs/en/config-files#project-wide-configuration 。所以我们要把babel的配置抽出来,写一个babel.config.json。
还要配置babel-loader的options, 告诉他配置文件的位置,使用
configFile: path.resolve(__dirname, '../babel.config.json'),
以上,就大功告成了
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.