折腾：
【部分解决】ReactJS中react-mobile-datepicker中input被设置readonly时无法滚动选择日期
期间，需要去修改：
react-mobile-datepicker
的源码，重新编译build生成对应的可以用的库
估计是dist文件夹中的
react-mobile-datepicker.js
react-mobile-datepicker.min.js
此处已经从：
lanjingling0510/react-mobile-datepicker: ? ? look a demo, Please imitate mobile environment.
下载到源码了：
git clone https://github.com/lanjingling0510/react-mobile-datepicker.git
然后去试试：
npm run build
结果出错：
➜ react-mobile-datepicker git:(master) npm run build > [email protected] build /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker > npm-run-all clean transpile minify size sh: npm-run-all: command not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! [email protected] build: `npm-run-all clean transpile minify size` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! /Users/crifan/.npm/_logs/2017-07-22T03_22_07_010Z-debug.log |
先去install
➜ react-mobile-datepicker git:(master) npm install npm WARN prefer global [email protected] should be installed with -g > [email protected] install /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/fsevents > node install [fsevents] Success: "/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed Pass –update-binary to reinstall or –build-from-source to recompile > [email protected] postinstall /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/webpack/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js added 1771 packages in 74.872s |
➜ react-mobile-datepicker git:(master) ✗ npm run Lifecycle scripts included in react-mobile-datepicker: start webpack-dev-server test nyc npm run mocha available via `npm run-script`: clean rm -rf dist/ build npm-run-all clean transpile minify size transpile rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName -o $npm_package_main minify uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative –in-source-map ${npm_package_main}.map –source-map ${npm_package_minified_main}.map size size=$(gzip-size $npm_package_minified_main | pretty-bytes) && echo "gzip size: $size" release scripts/release preview-release scripts/preview-release mocha mocha –compilers js:babel-core/register –require ./test/helper.js –recursive coverage nyc report –reporter=text-lcov | ./node_modules/.bin/coveralls storybook start-storybook -p 6006 build-storybook build-storybook ➜ react-mobile-datepicker git:(master) ✗ |
结果报错：
➜ react-mobile-datepicker git:(master) ✗ npm run build > [email protected] build /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker > npm-run-all clean transpile minify size > [email protected] clean /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker > rm -rf dist/ > [email protected] transpile /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker > rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName -o $npm_package_main prompt: version? (old is 3.0.6): Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning. resolve failed for "pretty-bytes-cli": Error: Cannot find module ‘pretty-bytes-cli’ node_modules/nan resolve failed for "gzip-size-cli": Error: Cannot find module ‘gzip-size-cli’ resolve failed for "caniuse-db": Error: Cannot find module ‘caniuse-db’ resolve failed for "babel-runtime": Error: Cannot find module ‘babel-runtime’ resolve failed for "@storybook": Error: Cannot find module ‘@storybook’ Node#after is deprecated. Use Node#raws.after Your current PostCSS version is 5.2.17, but postcss-nesting uses 6.0.7. Perhaps this is the source of the error below. Error transforming /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/lib/index.css: node.parent.after is not a function TypeError: Error transforming /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/lib/index.css: node.parent.after is not a function at module.exports (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/postcss-nesting/lib/transform-nesting-rule.js:18:29) at walk (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/postcss-nesting/index.js:25:3) at walk (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/postcss-nesting/index.js:33:4) at walk (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/postcss-nesting/index.js:33:4) at walk (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/postcss-nesting/index.js:33:4) at LazyResult.run (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:321:20) at LazyResult.asyncTick (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:248:32) at LazyResult.asyncTick (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:260:22) at LazyResult.asyncTick (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:260:22) at LazyResult.asyncTick (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:260:22) at LazyResult.asyncTick (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:260:22) at LazyResult.asyncTick (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:260:22) at LazyResult.asyncTick (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:260:22) at processing.Promise.then._this2.processed (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:286:18) at Promise (<anonymous>) at LazyResult.async (/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/reference/picker/react-mobile-datepicker/react-mobile-datepicker/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/lazy-result.es6:283:27) Type rollup –help for help, or visit https://github.com/rollup/rollup/wiki npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] transpile: `rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName -o $npm_package_main` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] transpile script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/crifan/.npm/_logs/2017-07-22T03_33_09_071Z-debug.log ERROR: "transpile" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: `npm-run-all clean transpile minify size` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/crifan/.npm/_logs/2017-07-22T03_33_09_125Z-debug.log ➜ react-mobile-datepicker git:(master) ✗ |
其中从：
rm -rf dist/
可以看出，的确是打包生成到dist文件夹中的。
react-mobile-datepicker npm run build fail
无解。
再去重新下载代码后
npm install
npm run build
结果还是一样的错误。
然后再去之前
npm install react-mobile-datepicker
出来的代码去：
npm install
npm run build
结果：
竟然可以了：
➜ react-mobile-datepicker git:(master) ✗ npm install npm WARN deprecated [email protected]: cssnext is now postcss-cssnext. cssnext is deprecated. See postcss-cssnext migration guide http://cssnext.io/postcss/ npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade npm WARN deprecated [email protected]: Deprecated. npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use ‘npm ls graceful-fs’ to find it in the tree. > [email protected] install /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker/node_modules/fsevents > node install [fsevents] Success: "/Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed Pass –update-binary to reinstall or –build-from-source to recompile npm notice created a lockfile as package-lock.json. You should commit this file. added 1555 packages in 113.642s ➜ react-mobile-datepicker git:(master) ✗ npm run build > [email protected] build /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker > npm-run-all clean transpile minify size > [email protected] clean /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker > rm -rf dist/ > [email protected] transpile /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker > rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName -o $npm_package_main Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs resolve failed for "react-mobile-datepicker": Error: Cannot find module ‘react-mobile-datepicker’ resolve failed for "rc-util": Error: Cannot find module ‘rc-util’ node_modules/nan resolve failed for "caniuse-db": Error: Cannot find module ‘caniuse-db’ resolve failed for "babel-runtime": Error: Cannot find module ‘babel-runtime’ resolve failed for "webpack-core": Error: Cannot find module ‘webpack-core’ Treating ‘react’ as external dependency Treating ‘react’ as external dependency Treating ‘react’ as external dependency Treating ‘react’ as external dependency Treating ‘react-dom’ as external dependency No name was provided for external module ‘react’ in options.globals – guessing ‘React’ No name was provided for external module ‘react-dom’ in options.globals – guessing ‘ReactDOM’ > [email protected] minify /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker > uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative –in-source-map ${npm_package_main}.map –source-map ${npm_package_minified_main}.map WARN: Side effects in initialization of unused variable asyncGenerator [react-mobile-datepicker.js:188,4] > [email protected] size /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker > size=$(gzip-size $npm_package_minified_main | pretty-bytes) && echo "gzip size: $size" gzip size: 5.12 kB ➜ react-mobile-datepicker git:(master) ✗ pwd /Users/crifan/dev/dev_root/daryun/Projects/奥拓/奶牛云/sourcecode/ucowsapp/ucowsapp/node_modules/react-mobile-datepicker ➜ react-mobile-datepicker git:(master) ✗ |
然后去修改源码为：
DatePickerItem.prototype._moveTo = function _moveTo(obj, currentIndex) { … // NOTE: There is no transitionend, setTimeout is used instead. setTimeout(function () { _this2.animating = false; _this2.props.onSelect(_this2.state.dates[MIDDLE_INDEX]); // this._clearTransition(this.refs.scroll); _this2._clearTransition(_this2.scroll); }, 200); }; DatePickerItem.prototype._moveToNext = function _moveToNext(direction) { … // this._moveTo(this.refs.scroll, this.currentIndex); this._moveTo(this.scroll, this.currentIndex); }; ref: function (scroll) { return _this3.scroll = scroll; } // eslint-disable-line |
再去
npm run build
后，确保生成了最新的库：
【总结】
此处，从对于库：
lanjingling0510/react-mobile-datepicker: ? ? look a demo, Please imitate mobile environment.
从
git clone https://github.com/lanjingling0510/react-mobile-datepicker.git
下载到的源码去编译：
npm install
npm run build
去编译结果出错。
而通过：
npm install react-mobile-datepicker
得到的node_modules/react-mobile-datepicker中的
lib/xxx
源码，去修改源码后
npm install
npm run build
（虽然也有一堆警告但）却是可以正常编译发布生成对应的库的：
dist/react-mobile-datepicker.js
dist/react-mobile-datepicker.min.js
等文件的。
从而可以供项目使用了。