athm-fe / create-autofe-app Goto Github PK
View Code? Open in Web Editor NEWRecommended Tooling for AutoFE Development
Home Page: https://athm-fe.github.io/create-autofe-app/
Recommended Tooling for AutoFE Development
Home Page: https://athm-fe.github.io/create-autofe-app/
如题
详情见这里 clean-css/clean-css#975 。
src
,开启另一个模式:直接把项目根目录作为 src
未完待续...
配置 ProvidePlugin 或者 DllPlugin
希望可以支持。
有可能我们会需要 import()
或 require.ensure
来动态加载 chunk,而 chunk 加载的路径是需用通过 webpack 的 publicPath
来解析的。
需要考虑下这个玩意儿。
原来这个方案 #5 废弃,不可取。
背景:目前只有 js 压缩功能
目标:
先分析错误信息,找出是语法问题,还是 API 不支持。
如果是语法问题(还没有被 babel-preset-autofe-app
支持):
babel-preset-autofe-app
babelrc
babel-preset-autofe-app
如果是 API 不支持,请自行提供 Polyfill,参考下文 Polyfill 策略
注意目前不建议使用如下内容:
如下内容可能有问题,需要小心(可以提供 Polyfill 搞定)
所以,如果要兼容 ie8 ,请使用 es5-shim+es5-sham 或者 babel-polyfill 。其它的,请自己根据情况处理。
另外,要兼容 ie8 的话,不要使用 ES6 Modules ,使用 CommonJS Modules 。
省心省力,就是有点大,但是功能齐全
注意:一个页面只能引用一个 babel-polyfill ,所以不建议给每一个 entry 加上 babel-polyfill ,除非你能够保证每一个页面只引用一个 entry。
entry: {
pageA: ['babel-polyfill', './pagea'],
pageB: ['babel-polyfill', './pageb'],
...
},
建议修改为
entry: {
vendor: 'babel-polyfill', // 或者自定义 ./polyfill
pageA: './pagea',
pageB: './pageb',
},
提供必要的 Polyfill 内容:
es5-shim
和 es5-sham
for <= ie8object-assign
es6-promise
该 Pollyfill 适用于使用 ES6+ 的语法,但是不使用 ES6+ 的 Built-ins(Map, Set 等) 和新 API 的情况。
自己在页面中引用:
<script src="/path/to/json3.min.js"></script>
<script src="/path/to/es5-shim.min.js"></script>
<script src="/path/to/es5-sham.min.js"></script>
<script src="/path/to/es6-promise.auto.min.js"></script>
<script src="/path/to/custom-polyfills.js"></script>
或者这么搞:
polyfills.entry.js
require('es5-shim');
require('es5-shim/es5-sham');
Object.assign = require('object-assign');
require('es6-promise/auto');
index.html
<script src="polyfills.js"></script>
defineProperty
支持的特性在 IE8 不可用,所以一些插件开启了 loose
模式。但是还是有一些功能不可用,比如 ES6 Modules 。new webpack.optimize.UglifyJsPlugin({
compress: {
properties: false,
warnings: false
},
output: {
beautify: true,
quote_keys: true
},
mangle: {
screw_ie8: false
},
sourceMap: false
})
大多数能够提供 Polyfill
Function.prototype.bind
Array.isArray
Array.prototype.indexOf
Object.create
Object.getOwnPropertyDescriptor
但是 Object
相关的几个 API 没法完全 Polyfill
Object.defineProperty
Object.defineProperties
Object.getPrototypeOf
Object.freeze
require('es5-shim');
require('es5-shim/es5-sham');
Symbol
, prototype[Symbol.iterator]
,比如 Array destructuring, For OfPromise
,动态加载 chunk, async/awaitArray.from
Object.assign
暂时不用,关闭了 transform-object-rest-spread 的 useBuiltIns
不好 Polyfill 的(不用担心,class 的 loose
模式不需要这些特性):
Object.setPrototypeOf
Object.prototype.__proto__
如果你不需要考虑支持 IE8 及一下,那么放心使用 ES6 Modules 。如果你真的需要支持 IE8,那么请使用 CommonJS Modules。
同样,动态加载 chunk 的 import()
和 require.ensure()
也遵循这个道理(虽然,我们在常规页面开发中基本用不到这个)。
原因解析:因为 ES6 Modules 依赖 Object.defineProperty
。
class
的实现依赖 ES5 的一些 API,这些 API 不被 IE8 所支持,并且无法很好的 Polyfill 。
更无语的是,extends
的实现依赖 setPrototypeOf
和 __proto__
,这两个特性在 IE 10 才有实现。虽然 babel 做了一些很巧妙的处理,使得我们能够实现类方法的 super 调用,但是无法做到类原型方法的 super 调用。
所以为了使用 class
,开启了相关插件的 loose
模式。这种模式下,仅仅需要提供 Object.create 的
Polyfill 即可。
// Transforms class properties, property and static
'transform-class-properties',
// For classes that have supers, the super class won’t resolve correctly.(IE10 and below)
// so enable loose mode
['transform-es2015-classes', {
loose: true,
}],
下面这两个不要用,一般来说都用不到:
transform-proto-to-assign
transform-object-set-prototype-of-to-assign
babel-polyfill 优点
babel-polyfill 缺点
transform-runtime 优点:
helpers
,polyfill
以及 regenerator
来决定需要什么功能transform-runtime 的缺点:
所以在应用中可以综合使用,比如 babel-polyfill + transform-runtime 的 helpers 处理能力。
而在工具和库的开发中,就不能使用 babel-polyfill 了。
综合上面的分析结果,决定自己定制 polyfill ,详情见 autofe-polyfill
。
推荐如下配置(如果需要提供 regenerator-runtime
的话):
// Runtime transform
['transform-runtime', {
helpers: false, // helpers 很鸡肋,开启后,打包代码反而变大
polyfill: false,
regenerator: true,
}],
目前建议不用 Generator、async/await ,老老实实用 Promise 就好。
如果一定要使用的话,请阅读下面的内容,并自行配置。
相关插件:
regeneratorRuntime
,由 babel-polyfill 或者 transform-runtime 提供。generator 如果转为 ES5 代码,需要 regeneratorRuntime
,而这个东东由 babel-polyfill 或者 transform-runtime 提供。
不使用 transform-regenerator 自带的 asyncGenerator to Generator
'transform-async-generator-functions',
['transform-regenerator', {
asyncGenerators: false,
}],
不使用 transform-regenerator 自带的 async to Generator
'transform-async-to-generator',
['transform-regenerator', {
async: false,
}],
自动进行如下转换:
'syntax-async-generators',
'transform-regenerator',
相当于
'syntax-async-generators',
['transform-regenerator', {
asyncGenerators: true,
async: true,
generators: true,
}],
'transform-async-generator-functions',
'transform-async-to-generator',
['transform-regenerator', {
asyncGenerators: false,
async: false,
generators: true,
}],
注:preset-es2015
默认关闭 asyncGenerators
和 async
[transformRegenerator, { async: false, asyncGenerators: false }],
可以增加配置来支持es6语法吗?
毕竟 create-autofe-app 依赖的安装包还是很多的,导致下载时间比较长。
大家觉得是否需要考虑如下功能:
将构建过程中的错误信息返回到页面,提高友好性
新增或者修改图片时,需要重复刷新和重启,图片才能显示出来。
mp3类型的文件打包时没有自动生成在build下
无论是 webpack 还是 gulp 的各种插件,我们可能都希望有自定义配置需求。所以需要统一规划一下该方案。
目标:
流口水盼望
涉及引入第三方模块,现在的检测规则太严格,需要修改的东西太多。打包的时候建议Eslint规则改简单些。
airbnb-base
即可
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.