最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】如何从项目react-mobile-datepicker的js源码编译并发布js库

ReactJS crifan 5929浏览 0评论

折腾:

【部分解决】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

等文件的。

从而可以供项目使用了。

转载请注明:在路上 » 【已解决】如何从项目react-mobile-datepicker的js源码编译并发布js库

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.171 seconds, using 22.22MB memory