diff --git a/.gitignore b/.gitignore index 8141d49fb..e9f5c4143 100644 --- a/.gitignore +++ b/.gitignore @@ -60,6 +60,7 @@ typings/ .DS_Store dist lib +es # 备份文件 /components/test/* diff --git a/README.md b/README.md index 2b2561d85..74138d3ea 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ [![Travis branch](https://img.shields.io/travis/vueComponent/ant-design/master.svg?style=flat-square)](https://travis-ci.org/vueComponent/ant-design) [![Dependency Status](https://beta.gemnasium.com/badges/github.com/vueComponent/ant-design.svg)](https://beta.gemnasium.com/projects/github.com/vueComponent/ant-design) [![npm package](https://img.shields.io/npm/v/vue-antd3/next.svg?style=flat-square)](https://www.npmjs.org/package/vue-antd3) -[![NPM downloads](http://img.shields.io/npm/dm/vue-antd3.svg?style=flat-square)](https://npmjs.org/package/ant-design) +[![NPM downloads](http://img.shields.io/npm/dm/vue-antd3.svg?style=flat-square)](https://npmjs.org/package/vue-antd3) [![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://www.npmjs.com/package/vue-antd3) diff --git a/antd-tools/getBabelCommonConfig.js b/antd-tools/getBabelCommonConfig.js index 2ff5c2222..0f7f28a44 100644 --- a/antd-tools/getBabelCommonConfig.js +++ b/antd-tools/getBabelCommonConfig.js @@ -2,14 +2,32 @@ module.exports = function (modules) { const plugins = [ - 'babel-plugin-transform-vue-jsx', - 'babel-plugin-transform-object-rest-spread', - 'babel-plugin-syntax-dynamic-import', - 'babel-plugin-transform-decorators-legacy', + // require.resolve('babel-plugin-transform-vue-jsx'), + require.resolve('babel-plugin-transform-es3-member-expression-literals'), + require.resolve('babel-plugin-transform-es3-property-literals'), + require.resolve('babel-plugin-transform-object-assign'), + require.resolve('babel-plugin-transform-object-rest-spread'), + require.resolve('babel-plugin-transform-decorators-legacy'), ] - + plugins.push([require.resolve('babel-plugin-transform-runtime'), { + polyfill: false, + }]) return { - presets: ['babel-preset-env'], + presets: [ + [require.resolve('babel-preset-env'), { + modules, + targets: { + browsers: [ + 'last 2 versions', + 'Firefox ESR', + '> 1%', + 'ie >= 9', + 'iOS >= 8', + 'Android >= 4', + ], + }, + }], + ], plugins, } } diff --git a/antd-tools/gulpfile.js b/antd-tools/gulpfile.js index a9269938c..6c48d3c44 100644 --- a/antd-tools/gulpfile.js +++ b/antd-tools/gulpfile.js @@ -2,13 +2,13 @@ // const install = require('./install') // const runCmd = require('./runCmd') -// const getBabelCommonConfig = require('./getBabelCommonConfig') -// const merge2 = require('merge2') +const getBabelCommonConfig = require('./getBabelCommonConfig') +const merge2 = require('merge2') // const { execSync } = require('child_process') -// const through2 = require('through2') -// const transformLess = require('./transformLess') +const through2 = require('through2') +const transformLess = require('./transformLess') const webpack = require('webpack') -// const babel = require('gulp-babel') +const babel = require('gulp-babel') // const argv = require('minimist')(process.argv.slice(2)) // const GitHub = require('github') @@ -17,15 +17,18 @@ const webpack = require('webpack') // const selfPackage = require('../package.json') // const chalk = require('chalk') // const getNpmArgs = require('./utils/get-npm-args') -// const getChangelog = require('./utils/getChangelog') + const path = require('path') // const watch = require('gulp-watch') const gulp = require('gulp') // const fs = require('fs') const rimraf = require('rimraf') +const replaceLib = require('./replaceLib') +const stripCode = require('gulp-strip-code') const cwd = process.cwd() -// const libDir = path.join(cwd, 'lib') +const libDir = path.join(cwd, 'lib') +const esDir = path.join(cwd, 'es') function dist (done) { rimraf.sync(path.join(cwd, 'dist')) @@ -64,7 +67,73 @@ function dist (done) { }) } +function babelify (js, modules) { + const babelConfig = getBabelCommonConfig(modules) + delete babelConfig.cacheDirectory + if (modules === false) { + babelConfig.plugins.push(replaceLib) + } else { + babelConfig.plugins.push(require.resolve('babel-plugin-add-module-exports')) + } + let stream = js.pipe(babel(babelConfig)) + .pipe(through2.obj(function z (file, encoding, next) { + this.push(file.clone()) + if (file.path.match(/\/style\/index\.js/)) { + const content = file.contents.toString(encoding) + file.contents = Buffer.from(content + .replace(/\/style\/?'/g, '/style/css\'') + .replace(/\.less/g, '.css')) + file.path = file.path.replace(/index\.js/, 'css.js') + this.push(file) + next() + } else { + next() + } + })) + if (modules === false) { + stream = stream.pipe(stripCode({ + start_comment: '@remove-on-es-build-begin', + end_comment: '@remove-on-es-build-end', + })) + } + return stream.pipe(gulp.dest(modules === false ? esDir : libDir)) +} + +function compile (modules) { + rimraf.sync(modules !== false ? libDir : esDir) + const less = gulp.src(['components/**/*.less']) + .pipe(through2.obj(function (file, encoding, next) { + this.push(file.clone()) + if (file.path.match(/\/style\/index\.less$/) || file.path.match(/\/style\/v2-compatible-reset\.less$/)) { + transformLess(file.path).then((css) => { + file.contents = Buffer.from(css) + file.path = file.path.replace(/\.less$/, '.css') + this.push(file) + next() + }).catch((e) => { + console.error(e) + }) + } else { + next() + } + })) + .pipe(gulp.dest(modules === false ? esDir : libDir)) + const assets = gulp.src(['components/**/*.@(png|svg)']).pipe(gulp.dest(modules === false ? esDir : libDir)) + + const source = [ + 'components/**/*.js', + 'components/**/*.jsx', + ] + const tsFilesStream = babelify(gulp.src(source), modules) + return merge2([less, tsFilesStream, assets]) +} + gulp.task('dist', (done) => { dist(done) }) - +gulp.task('compile', ['compile-with-es'], () => { + compile() +}) +gulp.task('compile-with-es', () => { + compile(false) +}) diff --git a/antd-tools/replaceLib.js b/antd-tools/replaceLib.js new file mode 100644 index 000000000..cd92ebebb --- /dev/null +++ b/antd-tools/replaceLib.js @@ -0,0 +1,27 @@ +'use strict' + +const { join, dirname } = require('path') +const fs = require('fs') + +const cwd = process.cwd() + +function replacePath (path) { + if (path.node.source && /\/lib\//.test(path.node.source.value)) { + const esModule = path.node.source.value.replace('/lib/', '/es/') + const esPath = dirname(join(cwd, `node_modules/${esModule}`)) + if (fs.existsSync(esPath)) { + path.node.source.value = esModule + } + } +} + +function replaceLib () { + return { + visitor: { + ImportDeclaration: replacePath, + ExportNamedDeclaration: replacePath, + }, + } +} + +module.exports = replaceLib diff --git a/package.json b/package.json index eff0327e6..228650fb2 100644 --- a/package.json +++ b/package.json @@ -1,146 +1,149 @@ { - "name": "vue-antd3", - "version": "0.1.0", - "title": "Ant Design Vue", - "description": "An enterprise-class UI design language and Vue-based implementation", - "keywords": [ - "ant", - "design", - "antd", - "vue", - "vueComponent", - "component", - "components", - "ui", - "framework", - "frontend" - ], - "main": "dist/antd.min.js", - "files": [ - "dist", - "components" - ], - "scripts": { - "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot", - "test": "karma start test/karma.conf.js --single-run", - "build": "sh build.sh", - "dist": "node antd-tools/cli/run.js dist", - "lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components", - "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/vueComponent/ant-design.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/vueComponent/ant-design/issues" - }, - "homepage": "https://github.com/vueComponent/ant-design", - "pre-commit": [ - "lint:style" - ], - "devDependencies": { - "@babel/core": "^7.0.0-beta.42", - "@babel/preset-env": "^7.0.0-beta.42", - "autoprefixer": "^8.1.0", - "babel": "^6.23.0", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", - "babel-eslint": "^8.0.1", - "babel-helper-vue-jsx-merge-props": "^2.0.3", - "babel-loader": "^7.1.2", - "babel-plugin-add-module-exports": "^0.2.1", - "babel-plugin-import": "^1.6.7", - "babel-plugin-istanbul": "^4.1.1", - "babel-plugin-syntax-dynamic-import": "^6.18.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "babel-plugin-transform-decorators": "^6.24.1", - "babel-plugin-transform-decorators-legacy": "^1.3.4", - "babel-plugin-transform-object-rest-spread": "^6.26.0", - "babel-plugin-transform-vue-jsx": "^3.7.0", - "babel-polyfill": "^6.26.0", - "babel-preset-env": "^1.6.1", - "case-sensitive-paths-webpack-plugin": "^2.1.2", - "chai": "^4.1.2", - "chalk": "^2.3.2", - "cheerio": "^1.0.0-rc.2", - "colorful": "^2.1.0", - "commander": "^2.15.0", - "css-loader": "^0.28.7", - "deep-assign": "^2.0.0", - "eslint": "^4.7.2", - "eslint-plugin-html": "^3.2.2", - "eslint-plugin-vue-libs": "^1.2.1", - "extract-text-webpack-plugin": "^3.0.2", - "fetch-jsonp": "^1.1.3", - "gulp": "^3.9.1", - "gulp-babel": "^8.0.0-beta.2", - "highlight.js": "^9.12.0", - "html-webpack-plugin": "^2.30.1", - "istanbul-instrumenter-loader": "^3.0.0", - "jsonp": "^0.2.1", - "karma": "^1.4.1", - "karma-coverage": "^1.1.1", - "karma-coverage-istanbul-reporter": "^1.3.0", - "karma-mocha": "^1.3.0", - "karma-phantomjs-launcher": "^1.0.2", - "karma-phantomjs-shim": "^1.4.0", - "karma-sinon-chai": "^1.3.1", - "karma-sourcemap-loader": "^0.3.7", - "karma-spec-reporter": "0.0.31", - "karma-webpack": "^2.0.2", - "less": "^2.7.2", - "less-loader": "^4.0.5", - "less-plugin-npm-import": "^2.1.0", - "markdown-it": "^8.4.0", - "marked": "^0.3.7", - "merge2": "^1.2.1", - "mocha": "^3.2.0", - "postcss": "^6.0.20", - "postcss-loader": "^2.1.2", - "pre-commit": "^1.2.2", - "querystring": "^0.2.0", - "rimraf": "^2.6.2", - "rucksack-css": "^1.0.2", - "selenium-server": "^3.0.1", - "semver": "^5.3.0", - "sinon": "^4.0.2", - "sinon-chai": "^2.8.0", - "style-loader": "^0.18.2", - "stylelint": "^8.1.1", - "stylelint-config-standard": "^17.0.0", - "through2": "^2.0.3", - "vue-antd-md-loader": "^1.0.2", - "vue-loader": "^13.0.5", - "vue-router": "^3.0.1", - "vue-template-compiler": "^2.5.15", - "webpack": "^3.6.0", - "webpack-chunk-hash": "^0.5.0", - "webpack-dev-server": "^2.8.2", - "webpack-merge": "^4.1.1" - }, - "dependencies": { - "add-dom-event-listener": "^1.0.2", - "array-tree-filter": "^2.1.0", - "classnames": "^2.2.5", - "component-classes": "^1.2.6", - "css-animation": "^1.4.1", - "dom-align": "^1.6.7", - "dom-scroll-into-view": "^1.2.1", - "enquire.js": "^2.1.6", - "eslint-plugin-vue": "^3.13.0", - "lodash.clonedeep": "^4.5.0", - "lodash.debounce": "^4.0.8", - "lodash.isequal": "^4.5.0", - "lodash.isplainobject": "^4.0.6", - "moment": "^2.21.0", - "omit.js": "^1.0.0", - "shallow-equal": "^1.0.0", - "shallowequal": "^1.0.2", - "vue": "^2.5.15", - "vue-clipboard2": "0.0.8", - "vue-types": "^1.0.2", - "warning": "^3.0.0" - } + "name": "vue-antd3", + "version": "0.1.0", + "title": "Ant Design Vue", + "description": "An enterprise-class UI design language and Vue-based implementation", + "keywords": [ + "ant", + "design", + "antd", + "vue", + "vueComponent", + "component", + "components", + "ui", + "framework", + "frontend" + ], + "main": "dist/antd.min.js", + "files": [ + "dist", + "components" + ], + "scripts": { + "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot", + "test": "karma start test/karma.conf.js --single-run", + "build": "sh build.sh", + "compile": "node antd-tools/cli/run.js compile", + "dist": "node antd-tools/cli/run.js dist", + "lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components", + "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vueComponent/ant-design.git" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/vueComponent/ant-design/issues" + }, + "homepage": "https://github.com/vueComponent/ant-design", + "pre-commit": [ + "lint:style" + ], + "devDependencies": { + "autoprefixer": "^8.1.0", + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^8.0.1", + "babel-helper-vue-jsx-merge-props": "^2.0.3", + "babel-loader": "^7.1.2", + "babel-plugin-add-module-exports": "^0.2.1", + "babel-plugin-import": "^1.1.1", + "babel-plugin-istanbul": "^4.1.1", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "babel-plugin-transform-decorators": "^6.24.1", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-es3-member-expression-literals": "^6.22.0", + "babel-plugin-transform-es3-property-literals": "^6.22.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-plugin-transform-runtime": "~6.23.0", + "babel-plugin-transform-vue-jsx": "^3.7.0", + "babel-polyfill": "^6.26.0", + "babel-preset-env": "^1.6.1", + "case-sensitive-paths-webpack-plugin": "^2.1.2", + "chai": "^4.1.2", + "chalk": "^2.3.2", + "cheerio": "^1.0.0-rc.2", + "colorful": "^2.1.0", + "commander": "^2.15.0", + "css-loader": "^0.28.7", + "deep-assign": "^2.0.0", + "eslint": "^4.7.2", + "eslint-plugin-html": "^3.2.2", + "eslint-plugin-vue-libs": "^1.2.1", + "extract-text-webpack-plugin": "^3.0.2", + "fetch-jsonp": "^1.1.3", + "gulp": "^3.9.1", + "gulp-babel": "^7.0.0", + "gulp-strip-code": "^0.1.4", + "highlight.js": "^9.12.0", + "html-webpack-plugin": "^2.30.1", + "istanbul-instrumenter-loader": "^3.0.0", + "jsonp": "^0.2.1", + "karma": "^1.4.1", + "karma-coverage": "^1.1.1", + "karma-coverage-istanbul-reporter": "^1.3.0", + "karma-mocha": "^1.3.0", + "karma-phantomjs-launcher": "^1.0.2", + "karma-phantomjs-shim": "^1.4.0", + "karma-sinon-chai": "^1.3.1", + "karma-sourcemap-loader": "^0.3.7", + "karma-spec-reporter": "0.0.31", + "karma-webpack": "^2.0.2", + "less": "^2.7.2", + "less-loader": "^4.0.5", + "less-plugin-npm-import": "^2.1.0", + "markdown-it": "^8.4.0", + "marked": "^0.3.7", + "merge2": "^1.2.1", + "mocha": "^3.2.0", + "postcss": "^6.0.20", + "postcss-loader": "^2.1.2", + "pre-commit": "^1.2.2", + "querystring": "^0.2.0", + "rimraf": "^2.6.2", + "rucksack-css": "^1.0.2", + "selenium-server": "^3.0.1", + "semver": "^5.3.0", + "sinon": "^4.0.2", + "sinon-chai": "^2.8.0", + "style-loader": "^0.18.2", + "stylelint": "^8.1.1", + "stylelint-config-standard": "^17.0.0", + "through2": "^2.0.3", + "vue-antd-md-loader": "^1.0.2", + "vue-loader": "^13.0.5", + "vue-router": "^3.0.1", + "vue-template-compiler": "^2.5.15", + "webpack": "^3.6.0", + "webpack-chunk-hash": "^0.5.0", + "webpack-dev-server": "^2.8.2", + "webpack-merge": "^4.1.1" + }, + "dependencies": { + "add-dom-event-listener": "^1.0.2", + "array-tree-filter": "^2.1.0", + "classnames": "^2.2.5", + "component-classes": "^1.2.6", + "css-animation": "^1.4.1", + "dom-align": "^1.6.7", + "dom-scroll-into-view": "^1.2.1", + "enquire.js": "^2.1.6", + "eslint-plugin-vue": "^3.13.0", + "lodash.clonedeep": "^4.5.0", + "lodash.debounce": "^4.0.8", + "lodash.isequal": "^4.5.0", + "lodash.isplainobject": "^4.0.6", + "moment": "^2.21.0", + "omit.js": "^1.0.0", + "shallow-equal": "^1.0.0", + "shallowequal": "^1.0.2", + "vue": "^2.5.15", + "vue-clipboard2": "0.0.8", + "vue-types": "^1.0.2", + "warning": "^3.0.0" + } }