You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.
entry: [// Include an alternative client for WebpackDevServer. A client's job is to// connect to WebpackDevServer by a socket and get notified about changes.// When you save a file, the client will either apply hot updates (in case// of CSS changes), or refresh the page (in case of JS changes). When you// make a syntax error, this client will display a syntax error overlay.// Note: instead of the default WebpackDevServer client, we use a custom one// to bring better experience for Create React App users. You can replace// the line below with these two lines if you prefer the stock client:// require.resolve('webpack-dev-server/client') + '?/',// require.resolve('webpack/hot/dev-server'),"@babel/polyfill",require.resolve('react-dev-utils/webpackHotDevClient'),// Finally, this is your app's code:paths.appIndexJs,// We include the app code last so that if there is a runtime error during// initialization, it doesn't blow up the WebpackDevServer client, and// changing JS code would still trigger a refresh.],
最近写公司项目的时候, 遇到了 Android 手机浏览器不兼容运行 ES6/7 代码的 Bug.
我需要把 ES6/7 代码转译成 ES5, Babel 可以帮我做到这一点.
但项目用的是 React, 需要自己动手来配置 Babel.
creact-react-app 创建的项目提供了具有合理缺省的完全配置, 能够上手即用, 适用于大多数环境.
它隐去了所有配置文件, 能够让我专心的写组件去构建我的应用界面.
我现在需要自定义配置的话, 就必须曝光这些配置文件.
在 create-react-app 的 README 里有这样一句话:
意思就是:
现在在项目根目录执行:
会提示:
Are you sure you want to eject? This action is permanent.
eject
是个 one-way operation (单向操作), 一旦执行就不能回退回去了.所以执行前真的要想清楚你是否真的需要用到这些配置.
虽然实际上没有多大影响, 只是让你的项目结构看起来好像臃肿了一点而已.
可能会逼死强迫症?👅项目结构
eject 之后根目录会多出
script
和config
两个文件夹.package.json
也会多出一些配置项.实际是多了这么多东西.
![console](https://camo.githubusercontent.com/f8999cb23c969c696ede986485322a23560ab56249a65a0b2c5352c686b04b97/68747470733a2f2f692e6c6f6c692e6e65742f323031392f31322f30352f33694c4a716f70413766527831777a2e706e67)
现在你可以在
package.json
里进行 Babel 的配置.也可以使用
.babelrc
, 需要手动创建.(Windows 下创建的方法是创建一个记事本, 命名为
.babelrc.
, 后面有个点的! )配置教程戳这里.
配置 Babel
我现在要的效果是能将 ES6/7 转译成 ES5. 需要用到的是一个叫 babel-preset-es2015 的预设.
但是它说:
现在是用一个叫
@babel/preset-env
的新预设来与 yearly 有关的预设了.在此之前, 需要查看一下 Babel 的版本是否对应. 因为这个新预设是属于 Babel 7 的.
所有 Babel Package 之间版本不兼容的话, 打包时就会报一个版本不对应的错误.
Plugin/Preset files are not allowed to export objects
Babel 7 使用了
@Babel/package-name
的命名方式来区分官方 package 以及 非官方 package,比如
babel-core
会变成@babel/core
, etc.将 Babel 版本升级到 v7 之后, 需要手动安装所有的 Babel 7 的 package, 例如默认带的
react-app
的预设需要手动安装并更换成@babel/preset-react
.题外话
我在项目中用到了 Ant Design Mobile. 如果直接使用组件需要手动引入样式css. 官网说明里介绍并推荐使用一个 Babel 插件
babel-plugin-import
来做到按需载入css.现在我的
.babelrc
是这样的:好的, 现在试着运行一下.
然后报了一个错误...?
Google 之后解决了. 需要应用运行前加入
babel-polyfill
.用 Polyfill 的介绍里的原话来说:
由于 Babel 只转换语法 (如箭头函数), 而 Polyfill 它会仿效一个完整的 ES2015+ 环境, 并意图运行于一个应用中而不是一个库/工具. 这意味着我们可以使用 ES2015+ 的特性. 如
Promise
等.要加入 Polyfill, 首先安装
@babel/polyfill
.然后打开
config/webpack.config.dev.js
和config/webpack.config.prod.js
,找到
entry
项并加入@babel/polyfill
.config/webpack.config.dev.js
config/webpack.config.prod.js
这样就完事了.
19.01.29 更新
昨天在开发另一个 Vue 的项目时也遇到了类似的问题,
但项目是已经通过 Babel 编译了却还是在 ios 9 的 Safari 上显示白屏.
找了很久之后发现原因是因为项目里用到的这个库 query-string 不知为何没有被 Babel 编译.
行8, 那我自己写... 🙂
结语
Babel 很有意思, 实用性也很强. 之前一直没有用得上的环境下去接触使用.
这次项目需要兼容到其他低版本的移动端浏览器, 也是终于有机会让我
水了一篇文章学习到了. 😄参考资料
https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
facebook/create-react-app#167
https://github.com/facebook/create-react-app#whats-included
https://babeljs.io/blog/2017/12/27/nearing-the-7.0-release#renames-scoped-packages-babel-x
babel/babel-preset-env#112
The text was updated successfully, but these errors were encountered: