From 130ed32bc57b4d2f34016792d9678d0f8f48ce34 Mon Sep 17 00:00:00 2001 From: LinXi Date: Wed, 5 Dec 2018 18:59:28 +0800 Subject: [PATCH 1/4] support external components --- src/index.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 3220abd..f505515 100644 --- a/src/index.js +++ b/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'; @@ -283,7 +283,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/', '../node_modules/')); + } if (!components.has(component)) { components.add(relative(this.base, component)); await this.getComponents(components, component); @@ -384,6 +387,13 @@ export default class WXAppPlugin { addScriptEntry(compiler, entry, name) { compiler.plugin('make', (compilation, callback) => { + if (this.options.externalComponents && this.options.externalComponents.length > 0) { + // change name since name will be used in the output path + const prefix = '../node_modules/'; + if (name.startsWith(prefix)) { + name = name.replace(prefix, 'components/'); + } + } const dep = SingleEntryPlugin.createDependency(entry, name); compilation.addEntry(this.base, dep, name, callback); }); @@ -407,7 +417,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 +450,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(); From b922ec0b2832fffc0cb5ef80df7e5739a842d01c Mon Sep 17 00:00:00 2001 From: LinXi Date: Thu, 6 Dec 2018 11:13:15 +0800 Subject: [PATCH 2/4] add options for externalComponents --- src/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index f505515..71c040b 100644 --- a/src/index.js +++ b/src/index.js @@ -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, }); @@ -285,7 +287,7 @@ export default class WXAppPlugin { if (relativeComponent.indexOf('plugin://') === 0) continue; let component = resolve(componentBase, relativeComponent); if (this.isExternalComponent(relativeComponent)) { - component = resolve(this.base, relativeComponent.replace('../../components/', '../node_modules/')); + component = resolve(this.base, relativeComponent.replace('../../components/', this.options.externalComponentsDirectory)); } if (!components.has(component)) { components.add(relative(this.base, component)); @@ -387,11 +389,10 @@ export default class WXAppPlugin { addScriptEntry(compiler, entry, name) { compiler.plugin('make', (compilation, callback) => { - if (this.options.externalComponents && this.options.externalComponents.length > 0) { + if (Array.isArray(this.options.externalComponents) && this.options.externalComponents.length > 0) { // change name since name will be used in the output path - const prefix = '../node_modules/'; - if (name.startsWith(prefix)) { - name = name.replace(prefix, 'components/'); + if (name.startsWith(this.options.externalComponentsDirectory)) { + name = name.replace(this.options.externalComponentsDirectory, 'components/'); } } const dep = SingleEntryPlugin.createDependency(entry, name); From 150f5e5a0ef54bcee723dcc8d062fde4b053dcb8 Mon Sep 17 00:00:00 2001 From: LinXi Date: Thu, 6 Dec 2018 15:02:47 +0800 Subject: [PATCH 3/4] add test for external components --- package.json | 1 + test/src/js/pages/index/index.json | 3 ++- test/src/js/pages/index/index.wxml | 3 +++ test/webpack.config.babel.js | 19 +++++++++++++++++++ 4 files changed, 25 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 64d2288..fdb465c 100644 --- a/package.json +++ b/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", diff --git a/test/src/js/pages/index/index.json b/test/src/js/pages/index/index.json index 22cd1a7..698a2f4 100644 --- a/test/src/js/pages/index/index.json +++ b/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" } } diff --git a/test/src/js/pages/index/index.wxml b/test/src/js/pages/index/index.wxml index 6fa58f8..2e7329d 100644 --- a/test/src/js/pages/index/index.wxml +++ b/test/src/js/pages/index/index.wxml @@ -7,5 +7,8 @@ {{motto}} go to subPackages + + An success prompt + diff --git a/test/webpack.config.babel.js b/test/webpack.config.babel.js index 5cfebbb..c81f361 100644 --- a/test/webpack.config.babel.js +++ b/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', From 3e1733117aaaff282ee9538a73f6637df7080d39 Mon Sep 17 00:00:00 2001 From: LinXi Date: Thu, 6 Dec 2018 15:04:10 +0800 Subject: [PATCH 4/4] update README for new options --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2f1da98..b762579 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,8 @@ export default { - `clear` (\): 在启动 `webpack` 时清空 `dist` 目录。默认为 `true` - `commonModuleName` (\): 公共 `js` 文件名。默认为 `common.js` - `extensions` (\\>): 脚本文件后缀名。默认为 `['.js']` +- `externalComponents` (\\>): 引用的外部组件名称。默认为 `[]` +- `externalComponentsDirectory` (\): 外部组件所在相对目录。默认为 `undefined` #### `Targets`