Support external components

README.md

@@ -81,6 +81,8 @@ export default {
 - `clear` (\<Boolean\>): 在启动 `webpack` 时清空 `dist` 目录。默认为 `true`
 - `commonModuleName` (\<String\>): 公共 `js` 文件名。默认为 `common.js`
 - `extensions` (\<Array\<String\>\>): 脚本文件后缀名。默认为 `['.js']`
+- `externalComponents` (\<Array\<String\>\>): 引用的外部组件名称。默认为 `[]`
+- `externalComponentsDirectory` (\<String\>): 外部组件所在相对目录。默认为 `undefined`
 
 #### `Targets`
 

package.json

@@ -50,6 +50,7 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-standard": "^3.0.1",
     "file-loader": "^0.11.1",
+    "iview-weapp": "^2.0.0",
     "jest": "^19.0.2",
     "mkdirp": "^0.5.1",
     "rimraf": "^2.6.1",

src/index.js

@@ -3,7 +3,7 @@ import { resolve, dirname, relative, join, parse } from 'path';
 import { optimize, LoaderTargetPlugin, JsonpTemplatePlugin } from 'webpack';
 import { ConcatSource } from 'webpack-sources';
 import globby from 'globby';
-import { defaults, values, uniq } from 'lodash';
+import { defaults, values, uniq, find } from 'lodash';
 import MultiEntryPlugin from 'webpack/lib/MultiEntryPlugin';
 import SingleEntryPlugin from 'webpack/lib/SingleEntryPlugin';
 import FunctionModulePlugin from 'webpack/lib/FunctionModulePlugin';
@@ -64,7 +64,9 @@ export default class WXAppPlugin {
 			extensions: ['.js'],
 			commonModuleName: 'common.js',
 			enforceTarget: true,
-			assetsChunkName: '__assets_chunk_name__'
+			assetsChunkName: '__assets_chunk_name__',
+			externalComponents: [],
+			externalComponentsDirectory: undefined,
 			// base: undefined,
 		});
 
@@ -283,7 +285,10 @@ export default class WXAppPlugin {
 		const componentBase = parse(instance).dir;
 		for (const relativeComponent of values(usingComponents)) {
 			if (relativeComponent.indexOf('plugin://') === 0) continue;
-			const component = resolve(componentBase, relativeComponent);
+			let component = resolve(componentBase, relativeComponent);
+			if (this.isExternalComponent(relativeComponent)) {
+				component = resolve(this.base, relativeComponent.replace('../../components/', this.options.externalComponentsDirectory));
+			}
 			if (!components.has(component)) {
 				components.add(relative(this.base, component));
 				await this.getComponents(components, component);
@@ -384,6 +389,12 @@ export default class WXAppPlugin {
 
 	addScriptEntry(compiler, entry, name) {
 		compiler.plugin('make', (compilation, callback) => {
+			if (Array.isArray(this.options.externalComponents) && this.options.externalComponents.length > 0) {
+				// change name since name will be used in the output path
+				if (name.startsWith(this.options.externalComponentsDirectory)) {
+					name = name.replace(this.options.externalComponentsDirectory, 'components/');
+				}
+			}
 			const dep = SingleEntryPlugin.createDependency(entry, name);
 			compilation.addEntry(this.base, dep, name, callback);
 		});
@@ -407,7 +418,7 @@ export default class WXAppPlugin {
 
 		// inject chunk entries
 		compilation.chunkTemplate.plugin('render', (core, { name }) => {
-			if (this.entryResources.indexOf(name) >= 0) {
+			if (this.entryResources.indexOf(name) >= 0 || this.isExternalComponent(name)) {
 				const relativePath = relative(dirname(name), `./${commonModuleName}`);
 				const posixPath = relativePath.replace(/\\/g, '/');
 				const source = core.source();
@@ -440,6 +451,10 @@ export default class WXAppPlugin {
 		);
 	}
 
+	isExternalComponent(name) {
+		return !!find(this.options.externalComponents, component => name.indexOf(`/${component}/`) !== -1);
+	}
+
 	async run(compiler) {
 		this.base = this.getBase(compiler);
 		this.entryResources = await this.getEntryResource();

test/src/js/pages/index/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "index-component": "../../components/index-component/index-component"
+    "index-component": "../../components/index-component/index-component",
+    "i-alert": "../../components/iview-weapp/dist/alert/index"
   }
 }

test/src/js/pages/index/index.wxml

@@ -7,5 +7,8 @@
   <view class="usermotto">
     <text class="user-motto">{{motto}}</text>
     <view bindtap="goToSubList">go to subPackages</view>
+    <i-alert type="success">
+      An success prompt
+    </i-alert>
   </view>
 </view>

test/webpack.config.babel.js

@@ -35,11 +35,30 @@ export default {
 					name: '[name].[ext]',
 				}
 			},
+			{
+				test: /\.(wxss|wxml|json|png)$/,
+				include: /node_modules/,
+				loader: 'file-loader',
+				options: {
+					useRelativePath: false,
+					name: (filePath) => {
+						const flag = 'node_modules/';
+						const index = filePath.indexOf(flag);
+						if (index !== -1) {
+							const targetPath = filePath.substring(index + flag.length).split('.')[0];
+							return `./components/${targetPath}.[ext]`;
+						}
+						return `[name].[ext]`;
+					},
+				}
+			},
 		],
 	},
 	plugins: [
 		new WXAppWebpackPlugin({
 			extensions: [`.${ext}`, '.js'],
+			externalComponents: ['iview-weapp'],
+			externalComponentsDirectory: '../../../node_modules/',
 		}),
 	],
 	devtool: 'source-map',