antd-mobile-samples icon indicating copy to clipboard operation
antd-mobile-samples copied to clipboard

A rollup sample is required

Open ayqy opened this issue 6 years ago • 5 comments

  • antd-mobile 版本:v2.1.3
  • 浏览器 (或标明是 react-native) 及其版本:Chrome latest
  • 操作系统及其版本:Mac OSX

React 16 has changed to bundle with rollup, for a smaller file size and runtime performance:

React now uses Rollup to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins.

However, as we all know, rollup configuration is painful, and some rc-components is not really friendly to rollup, even React changes the source code to workaround rollup bug. So, maybe a rollup sample is required.

BTW. React seems to prepare to add an es version, and then a rollup sample of antd-mobile will be a little bit easier.

ayqy avatar Jan 15 '18 12:01 ayqy

actually, i cloned ant design mobile, and change it by using rollup re-compile, you can see here: https://github.com/chalecao/preact-h5-ui (change some dynamic to make it act normal for es module import)

chalecao avatar Jun 28 '18 12:06 chalecao

you can use my preact-h5-ui, here is the rollup.config.js,

import buble from 'rollup-plugin-buble' // 通过这个插件可以方便的使用 javascript 的新特性,配置上稍微麻烦一些,如下安装相应插件(包括配置babel 需要的插件) import babel from 'rollup-plugin-babel' // 帮助 Rollup 查找外部模块,然后安装,相关配置 import resolve from 'rollup-plugin-node-resolve' // import json from 'rollup-plugin-json'; // rollup-plugin-node-resolve 插件可以解决 ES6模块的查找导入,但是npm中的大多数包都是以CommonJS模块的形式出现的,所以需要使用这个插件将CommonJS模块转换为 ES2015 供 Rollup 处理 import commonjs from 'rollup-plugin-commonjs' import replace from 'rollup-plugin-replace' import alias from 'rollup-plugin-alias' import path from "path" import uglify from 'rollup-plugin-uglify' import {minify} from 'uglify-es' const isProduction = process.env.NODE_ENV === 'production';

export default [{ input: 'src/module/main/main.js', output: { file: 'src/main.js', format: 'cjs' }, external: [], plugins: [ replace({ "process.env.NODE_ENV": "'production'" }), alias({ 'react': path.resolve('./node_modules/preact-compat/dist/preact-compat.es.js'), 'react-dom': path.resolve('./node_modules/preact-compat/dist/preact-compat.es.js'), 'indexof': path.resolve('./node_modules/component-indexof/index.js') }), resolve({ "jsnext": true, module: true, main: true }), babel({ "presets": [[ "env", { "modules": false, loose: true, exclude: ['transform-es2015-typeof-symbol'], targets: { browsers: ["Android >= 4.4", "ios > 7"] }, "useBuiltIns": true } ]], "plugins": [ ["transform-react-jsx", { "pragma": "h" }], "add-module-exports", "external-helpers"//注意这个参数不能加,加了之后模块exports有问题,坑坑坑 ] }), commonjs({ include: 'node_modules/**', // 包括 exclude: [], // 排除 }), buble(), (isProduction && uglify({ mangle: { toplevel: true } }, minify)) ] }]

chalecao avatar Jun 28 '18 12:06 chalecao

Stop filling github with chines. instead focus on programmer issue for sake of good! this is an international website after all. please be helpfull!

B-Esmaili avatar Sep 05 '19 06:09 B-Esmaili

@B-Esmaili It's better for helping others with English here for no doubts by all means I think, but in the fact of that it would increase the cost for helping for people who did not born in English-based country and has poor English skills. I don't think we have rights for imperatively asking people who just want to give some helps.

So we could just ignore it, translate it with google translate or go learning Chinese(it's interesting!) :)

JasinYip avatar Sep 05 '19 08:09 JasinYip

@JasinYip I think creators of an international library should be able to read / write in English if you don't mind me saying. beside I don't ask anyone help me forcibly neither wanna get premium support for a commercial product , i am here asking about very primary behavior of an opensource library which is supposed to be working by definition.

B-Esmaili avatar Sep 05 '19 11:09 B-Esmaili