chushihua
This commit is contained in:
+139
@@ -0,0 +1,139 @@
|
||||
# babel-plugin-component
|
||||
|
||||
[](https://npmjs.org/package/babel-plugin-component)
|
||||
[](https://travis-ci.org/ElementUI/babel-plugin-component)
|
||||
[](https://coveralls.io/github/QingWei-Li/babel-plugin-component?branch=master)
|
||||
|
||||
## Install
|
||||
|
||||
```shell
|
||||
npm i babel-plugin-component -D
|
||||
|
||||
# For babel6
|
||||
npm i babel-plugin-component@0 -D
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
Converts
|
||||
|
||||
```javascript
|
||||
import { Button } from 'components'
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```javascript
|
||||
var button = require('components/lib/button')
|
||||
require('components/lib/button/style.css')
|
||||
```
|
||||
|
||||
## styleLibraryName Example
|
||||
|
||||
Converts
|
||||
|
||||
```javascript
|
||||
import Components from 'components'
|
||||
import { Button } from 'components'
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```javascript
|
||||
require('components/lib/styleLibraryName/index.css')
|
||||
var button = require('components/lib/styleLibraryName/button.css')
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Via `.babelrc` or babel-loader.
|
||||
|
||||
```javascript
|
||||
{
|
||||
"plugins": [["component", options]]
|
||||
}
|
||||
```
|
||||
|
||||
## Multiple Module
|
||||
```javascript
|
||||
{
|
||||
"plugins": [xxx,
|
||||
["component", {
|
||||
libraryName: "antd",
|
||||
style: true,
|
||||
}, "antd"],
|
||||
["component", {
|
||||
libraryName: "test-module",
|
||||
style: true,
|
||||
}, "test-module"]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Component directory structure
|
||||
```
|
||||
- lib // 'libDir'
|
||||
- index.js // or custom 'root' relative path
|
||||
- style.css // or custom 'style' relative path
|
||||
- componentA
|
||||
- index.js
|
||||
- style.css
|
||||
- componentB
|
||||
- index.js
|
||||
- style.css
|
||||
```
|
||||
|
||||
### Theme library directory structure
|
||||
```
|
||||
- lib
|
||||
- theme-default // 'styleLibraryName'
|
||||
- base.css // required
|
||||
- index.css // required
|
||||
- componentA.css
|
||||
- componentB.css
|
||||
- theme-material
|
||||
- ...
|
||||
- componentA
|
||||
- index.js
|
||||
- componentB
|
||||
- index.js
|
||||
```
|
||||
or
|
||||
```
|
||||
- lib
|
||||
- theme-custom // 'styleLibrary.name'
|
||||
- base.css // if styleLibrary.base true
|
||||
- index.css // required
|
||||
- componentA.css // default
|
||||
- componentB.css
|
||||
- theme-material
|
||||
- componentA
|
||||
-index.css // styleLibrary.path [module]/index.css
|
||||
- componentB
|
||||
-index.css
|
||||
- componentA
|
||||
- index.js
|
||||
- componentB
|
||||
- index.js
|
||||
```
|
||||
|
||||
### options
|
||||
|
||||
- `["component"]`: import js modularly
|
||||
- `["component", { "libraryName": "component" }]`: module name
|
||||
- `["component", { "styleLibraryName": "theme_package" }]`: style module name
|
||||
- `["component", { "styleLibraryName": "~independent_theme_package" }]`: Import a independent theme package
|
||||
- `["component", { "styleLibrary": {} }]`: Import a independent theme package with more config
|
||||
```
|
||||
styleLibrary: {
|
||||
"name": "xxx", // same with styleLibraryName
|
||||
"base": true, // if theme package has a base.css
|
||||
"path": "[module]/index.css", // the style path. e.g. module Alert => alert/index.css
|
||||
"mixin": true // if theme-package not found css file, then use [libraryName]'s css file
|
||||
}
|
||||
```
|
||||
- `["component", { "style": true }]`: import js and css from 'style.css'
|
||||
- `["component", { "style": cssFilePath }]`: import style css from filePath
|
||||
- `["component", { "libDir": "lib" }]`: lib directory
|
||||
- `["component", { "root": "index" }]`: main file dir
|
||||
- `["component", { "camel2Dash": false }]`: whether parse name to dash mode or not, default `true`
|
||||
+294
@@ -0,0 +1,294 @@
|
||||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
var _require = require('@babel/helper-module-imports'),
|
||||
addSideEffect = _require.addSideEffect,
|
||||
addDefault = _require.addDefault;
|
||||
|
||||
var resolve = require('path').resolve;
|
||||
|
||||
var isExist = require('fs').existsSync;
|
||||
|
||||
var cache = {};
|
||||
var cachePath = {};
|
||||
var importAll = {};
|
||||
|
||||
module.exports = function core(defaultLibraryName) {
|
||||
return function (_ref) {
|
||||
var types = _ref.types;
|
||||
var specified;
|
||||
var libraryObjs;
|
||||
var selectedMethods;
|
||||
var moduleArr;
|
||||
|
||||
function parseName(_str, camel2Dash) {
|
||||
if (!camel2Dash) {
|
||||
return _str;
|
||||
}
|
||||
|
||||
var str = _str[0].toLowerCase() + _str.substr(1);
|
||||
|
||||
return str.replace(/([A-Z])/g, function ($1) {
|
||||
return "-".concat($1.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
function importMethod(methodName, file, opts) {
|
||||
if (!selectedMethods[methodName]) {
|
||||
var options;
|
||||
var path;
|
||||
|
||||
if (Array.isArray(opts)) {
|
||||
options = opts.find(function (option) {
|
||||
return moduleArr[methodName] === option.libraryName || libraryObjs[methodName] === option.libraryName;
|
||||
}); // eslint-disable-line
|
||||
}
|
||||
|
||||
options = options || opts;
|
||||
var _options = options,
|
||||
_options$libDir = _options.libDir,
|
||||
libDir = _options$libDir === void 0 ? 'lib' : _options$libDir,
|
||||
_options$libraryName = _options.libraryName,
|
||||
libraryName = _options$libraryName === void 0 ? defaultLibraryName : _options$libraryName,
|
||||
_options$style = _options.style,
|
||||
style = _options$style === void 0 ? true : _options$style,
|
||||
styleLibrary = _options.styleLibrary,
|
||||
_options$root = _options.root,
|
||||
root = _options$root === void 0 ? '' : _options$root,
|
||||
_options$camel2Dash = _options.camel2Dash,
|
||||
camel2Dash = _options$camel2Dash === void 0 ? true : _options$camel2Dash;
|
||||
var styleLibraryName = options.styleLibraryName;
|
||||
var _root = root;
|
||||
var isBaseStyle = true;
|
||||
var modulePathTpl;
|
||||
var styleRoot;
|
||||
var mixin = false;
|
||||
var ext = options.ext || '.css';
|
||||
|
||||
if (root) {
|
||||
_root = "/".concat(root);
|
||||
}
|
||||
|
||||
if (libraryObjs[methodName]) {
|
||||
path = "".concat(libraryName, "/").concat(libDir).concat(_root);
|
||||
|
||||
if (!_root) {
|
||||
importAll[path] = true;
|
||||
}
|
||||
} else {
|
||||
path = "".concat(libraryName, "/").concat(libDir, "/").concat(parseName(methodName, camel2Dash));
|
||||
}
|
||||
|
||||
var _path = path;
|
||||
selectedMethods[methodName] = addDefault(file.path, path, {
|
||||
nameHint: methodName
|
||||
});
|
||||
|
||||
if (styleLibrary && _typeof(styleLibrary) === 'object') {
|
||||
styleLibraryName = styleLibrary.name;
|
||||
isBaseStyle = styleLibrary.base;
|
||||
modulePathTpl = styleLibrary.path;
|
||||
mixin = styleLibrary.mixin;
|
||||
styleRoot = styleLibrary.root;
|
||||
}
|
||||
|
||||
if (styleLibraryName) {
|
||||
if (!cachePath[libraryName]) {
|
||||
var themeName = styleLibraryName.replace(/^~/, '');
|
||||
cachePath[libraryName] = styleLibraryName.indexOf('~') === 0 ? resolve(process.cwd(), themeName) : "".concat(libraryName, "/").concat(libDir, "/").concat(themeName);
|
||||
}
|
||||
|
||||
if (libraryObjs[methodName]) {
|
||||
/* istanbul ingore next */
|
||||
if (cache[libraryName] === 2) {
|
||||
throw Error('[babel-plugin-component] If you are using both' + 'on-demand and importing all, make sure to invoke the' + ' importing all first.');
|
||||
}
|
||||
|
||||
if (styleRoot) {
|
||||
path = "".concat(cachePath[libraryName]).concat(styleRoot).concat(ext);
|
||||
} else {
|
||||
path = "".concat(cachePath[libraryName]).concat(_root || '/index').concat(ext);
|
||||
}
|
||||
|
||||
cache[libraryName] = 1;
|
||||
} else {
|
||||
if (cache[libraryName] !== 1) {
|
||||
/* if set styleLibrary.path(format: [module]/module.css) */
|
||||
var parsedMethodName = parseName(methodName, camel2Dash);
|
||||
|
||||
if (modulePathTpl) {
|
||||
var modulePath = modulePathTpl.replace(/\[module]/ig, parsedMethodName);
|
||||
path = "".concat(cachePath[libraryName], "/").concat(modulePath);
|
||||
} else {
|
||||
path = "".concat(cachePath[libraryName], "/").concat(parsedMethodName).concat(ext);
|
||||
}
|
||||
|
||||
if (mixin && !isExist(path)) {
|
||||
path = style === true ? "".concat(_path, "/style").concat(ext) : "".concat(_path, "/").concat(style);
|
||||
}
|
||||
|
||||
if (isBaseStyle) {
|
||||
addSideEffect(file.path, "".concat(cachePath[libraryName], "/base").concat(ext));
|
||||
}
|
||||
|
||||
cache[libraryName] = 2;
|
||||
}
|
||||
}
|
||||
|
||||
addDefault(file.path, path, {
|
||||
nameHint: methodName
|
||||
});
|
||||
} else {
|
||||
if (style === true) {
|
||||
addSideEffect(file.path, "".concat(path, "/style").concat(ext));
|
||||
} else if (style) {
|
||||
addSideEffect(file.path, "".concat(path, "/").concat(style));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return selectedMethods[methodName];
|
||||
}
|
||||
|
||||
function buildExpressionHandler(node, props, path, state) {
|
||||
var file = path && path.hub && path.hub.file || state && state.file;
|
||||
props.forEach(function (prop) {
|
||||
if (!types.isIdentifier(node[prop])) return;
|
||||
|
||||
if (specified[node[prop].name]) {
|
||||
node[prop] = importMethod(node[prop].name, file, state.opts); // eslint-disable-line
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function buildDeclaratorHandler(node, prop, path, state) {
|
||||
var file = path && path.hub && path.hub.file || state && state.file;
|
||||
if (!types.isIdentifier(node[prop])) return;
|
||||
|
||||
if (specified[node[prop].name]) {
|
||||
node[prop] = importMethod(node[prop].name, file, state.opts); // eslint-disable-line
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
visitor: {
|
||||
Program: function Program() {
|
||||
specified = Object.create(null);
|
||||
libraryObjs = Object.create(null);
|
||||
selectedMethods = Object.create(null);
|
||||
moduleArr = Object.create(null);
|
||||
},
|
||||
ImportDeclaration: function ImportDeclaration(path, _ref2) {
|
||||
var opts = _ref2.opts;
|
||||
var node = path.node;
|
||||
var value = node.source.value;
|
||||
var result = {};
|
||||
|
||||
if (Array.isArray(opts)) {
|
||||
result = opts.find(function (option) {
|
||||
return option.libraryName === value;
|
||||
}) || {};
|
||||
}
|
||||
|
||||
var libraryName = result.libraryName || opts.libraryName || defaultLibraryName;
|
||||
|
||||
if (value === libraryName) {
|
||||
node.specifiers.forEach(function (spec) {
|
||||
if (types.isImportSpecifier(spec)) {
|
||||
specified[spec.local.name] = spec.imported.name;
|
||||
moduleArr[spec.imported.name] = value;
|
||||
} else {
|
||||
libraryObjs[spec.local.name] = value;
|
||||
}
|
||||
});
|
||||
|
||||
if (!importAll[value]) {
|
||||
path.remove();
|
||||
}
|
||||
}
|
||||
},
|
||||
CallExpression: function CallExpression(path, state) {
|
||||
var node = path.node;
|
||||
var file = path && path.hub && path.hub.file || state && state.file;
|
||||
var name = node.callee.name;
|
||||
|
||||
if (types.isIdentifier(node.callee)) {
|
||||
if (specified[name]) {
|
||||
node.callee = importMethod(specified[name], file, state.opts);
|
||||
}
|
||||
} else {
|
||||
node.arguments = node.arguments.map(function (arg) {
|
||||
var argName = arg.name;
|
||||
|
||||
if (specified[argName]) {
|
||||
return importMethod(specified[argName], file, state.opts);
|
||||
} else if (libraryObjs[argName]) {
|
||||
return importMethod(argName, file, state.opts);
|
||||
}
|
||||
|
||||
return arg;
|
||||
});
|
||||
}
|
||||
},
|
||||
MemberExpression: function MemberExpression(path, state) {
|
||||
var node = path.node;
|
||||
var file = path && path.hub && path.hub.file || state && state.file;
|
||||
|
||||
if (libraryObjs[node.object.name] || specified[node.object.name]) {
|
||||
node.object = importMethod(node.object.name, file, state.opts);
|
||||
}
|
||||
},
|
||||
AssignmentExpression: function AssignmentExpression(path, _ref3) {
|
||||
var opts = _ref3.opts;
|
||||
|
||||
if (!path.hub) {
|
||||
return;
|
||||
}
|
||||
|
||||
var node = path.node;
|
||||
var file = path.hub.file;
|
||||
if (node.operator !== '=') return;
|
||||
|
||||
if (libraryObjs[node.right.name] || specified[node.right.name]) {
|
||||
node.right = importMethod(node.right.name, file, opts);
|
||||
}
|
||||
},
|
||||
ArrayExpression: function ArrayExpression(path, _ref4) {
|
||||
var opts = _ref4.opts;
|
||||
|
||||
if (!path.hub) {
|
||||
return;
|
||||
}
|
||||
|
||||
var elements = path.node.elements;
|
||||
var file = path.hub.file;
|
||||
elements.forEach(function (item, key) {
|
||||
if (item && (libraryObjs[item.name] || specified[item.name])) {
|
||||
elements[key] = importMethod(item.name, file, opts);
|
||||
}
|
||||
});
|
||||
},
|
||||
Property: function Property(path, state) {
|
||||
var node = path.node;
|
||||
buildDeclaratorHandler(node, 'value', path, state);
|
||||
},
|
||||
VariableDeclarator: function VariableDeclarator(path, state) {
|
||||
var node = path.node;
|
||||
buildDeclaratorHandler(node, 'init', path, state);
|
||||
},
|
||||
LogicalExpression: function LogicalExpression(path, state) {
|
||||
var node = path.node;
|
||||
buildExpressionHandler(node, ['left', 'right'], path, state);
|
||||
},
|
||||
ConditionalExpression: function ConditionalExpression(path, state) {
|
||||
var node = path.node;
|
||||
buildExpressionHandler(node, ['test', 'consequent', 'alternate'], path, state);
|
||||
},
|
||||
IfStatement: function IfStatement(path, state) {
|
||||
var node = path.node;
|
||||
buildExpressionHandler(node, ['test'], path, state);
|
||||
buildExpressionHandler(node.test, ['left', 'right'], path, state);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
module.exports = require('./core')('element-ui');
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"name": "babel-plugin-component",
|
||||
"version": "1.1.1",
|
||||
"description": "Modular build plugin for babel.",
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
"build": "rm -rf lib && babel src --out-dir lib --ignore __tests__",
|
||||
"test": "mocha --require @babel/register",
|
||||
"debug": "mocha --require @babel/register --require @babel/polyfill --no-timeouts",
|
||||
"lint": "eslint --ext .js src",
|
||||
"coveralls": "cat ./coverage/lcov.info | coveralls",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint"
|
||||
],
|
||||
"keywords": [
|
||||
"babel-plugin"
|
||||
],
|
||||
"author": [
|
||||
"chencheng <sorrycc@gmail.com>",
|
||||
"qingwei-li <cinwell.li@gmail.com>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "7.0.0-beta.35",
|
||||
"@babel/core": "7.0.0-beta.35",
|
||||
"@babel/node": "7.0.0-beta.35",
|
||||
"@babel/preset-env": "7.0.0-beta.35",
|
||||
"@babel/preset-react": "7.0.0-beta.35",
|
||||
"@babel/preset-stage-0": "7.0.0-beta.35",
|
||||
"@babel/register": "7.0.0-beta.35",
|
||||
"coveralls": "^2.11.6",
|
||||
"eslint": "^2.7.0",
|
||||
"eslint-config-airbnb": "^6.2.0",
|
||||
"expect": "^1.13.4",
|
||||
"mocha": "4.0.1",
|
||||
"pre-commit": "~1.1.2"
|
||||
},
|
||||
"repository": "ElementUI/babel-plugin-component",
|
||||
"homepage": "https://github.com/ElementUI/babel-plugin-component#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ElementUI/babel-plugin-component/issues"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"lib",
|
||||
"package.json",
|
||||
"README.md"
|
||||
],
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "7.0.0-beta.35"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user