'latLng' 未由 'node_modules/leaflet/dist/leaflet-src.js' 导出传单上的汇总构建失败
'latLng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js' Rollup build fails on leaflet
我正在使用 angular-seed by Minko.Also using @asymmetrik/angular2-leaflet。正常的生产构建有效 well.When 运行 npm run build.prod.rollup.aot
它因错误而失败。
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (23:21) 'tile
Layer' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (41:22) 'latL
ng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (68:31) 'circ
le' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (6:32)
'latLng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (20:21)
'map' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/layers/control/leaflet-control-la
yers.wrapper.js (13:31) 'control' is not exported by 'node_modules/leaflet/dist/leaflet-
src.js'
project.config.ts
名为 import
的汇总
this.ROLLUP_NAMED_EXPORTS = [
...this.ROLLUP_NAMED_EXPORTS,
{'node_modules/leaflet/dist/leaflet.js': [ 'leaflet' ]},
];
其他包
let additionalPackages: ExtendPackages[] = [
{
name: 'leaflet',
path: 'node_modules/leaflet/dist/leaflet.js'
},
{
name: '@asymmetrik/angular2-leaflet',
path: 'node_modules/@asymmetrik/angular2-leaflet/dist/bundles/angular2-leaflet.js'
}
];
汇总配置(build.bundles.app.rollup.aot.ts)
import Config from '../../config';
import { writeFile } from 'fs';
import { join } from 'path';
const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const includePaths = require('rollup-plugin-includepaths');
const rollup = require('rollup');
const alias = require('rollup-plugin-alias');
const config = {
entry: join(Config.TMP_DIR, Config.BOOTSTRAP_FACTORY_PROD_MODULE),
sourceMap: true,
treeshake: true,
moduleName: 'main',
plugins: [
includePaths({
include: {},
paths: [join(Config.TMP_DIR, 'app')],
external: [],
extensions: ['.js', '.json', '.html', '.ts']
}),
alias({
jszip: join(__dirname, '../../../node_modules/jszip/dist/jszip.min.js')
}),
nodeResolve({
jsnext: true, main: true, module: true
}),
commonjs({ //See project.config.ts to extend
include: Config.ROLLUP_INCLUDE_DIR,
namedExports: Config.getRollupNamedExports()
})
]
};
export = (done: any) => {
rollup.rollup(config)
.then((bundle: any) => {
const result = bundle.generate({
format: 'iife'
});
const path = join(Config.TMP_DIR, 'bundle.js');
writeFile(path, result.code, (error: any) => {
if (error) {
console.error(error);
process.exit(0);
}
done();
});
})
.catch((error: any) => {
console.error(error);
process.exit(0);
});
};
问题出在汇总 build.When 我 运行 npm 运行 build.prod.rollup.aot 以上错误开始 appear.But 我修复了 issue.The 问题出在命名导出上。 leaflet-src.js 未导出所需的 modules.So 我在 project.config.ts.
中添加了名为 exports 的缺失内容
this.ROLLUP_NAMED_EXPORTS = [
...this.ROLLUP_NAMED_EXPORTS,
{'node_modules/leaflet/dist/leaflet.js': [ 'leaflet' ]},
{'node_modules/leaflet/dist/leaflet-src.js': [ 'latLng', 'map','control' ]},
];
现在一切正常。
我正在使用 angular-seed by Minko.Also using @asymmetrik/angular2-leaflet。正常的生产构建有效 well.When 运行 npm run build.prod.rollup.aot
它因错误而失败。
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (23:21) 'tile
Layer' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (41:22) 'latL
ng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (68:31) 'circ
le' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (6:32)
'latLng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (20:21)
'map' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/layers/control/leaflet-control-la
yers.wrapper.js (13:31) 'control' is not exported by 'node_modules/leaflet/dist/leaflet-
src.js'
project.config.ts 名为 import
的汇总this.ROLLUP_NAMED_EXPORTS = [
...this.ROLLUP_NAMED_EXPORTS,
{'node_modules/leaflet/dist/leaflet.js': [ 'leaflet' ]},
];
其他包
let additionalPackages: ExtendPackages[] = [
{
name: 'leaflet',
path: 'node_modules/leaflet/dist/leaflet.js'
},
{
name: '@asymmetrik/angular2-leaflet',
path: 'node_modules/@asymmetrik/angular2-leaflet/dist/bundles/angular2-leaflet.js'
}
];
汇总配置(build.bundles.app.rollup.aot.ts)
import Config from '../../config';
import { writeFile } from 'fs';
import { join } from 'path';
const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const includePaths = require('rollup-plugin-includepaths');
const rollup = require('rollup');
const alias = require('rollup-plugin-alias');
const config = {
entry: join(Config.TMP_DIR, Config.BOOTSTRAP_FACTORY_PROD_MODULE),
sourceMap: true,
treeshake: true,
moduleName: 'main',
plugins: [
includePaths({
include: {},
paths: [join(Config.TMP_DIR, 'app')],
external: [],
extensions: ['.js', '.json', '.html', '.ts']
}),
alias({
jszip: join(__dirname, '../../../node_modules/jszip/dist/jszip.min.js')
}),
nodeResolve({
jsnext: true, main: true, module: true
}),
commonjs({ //See project.config.ts to extend
include: Config.ROLLUP_INCLUDE_DIR,
namedExports: Config.getRollupNamedExports()
})
]
};
export = (done: any) => {
rollup.rollup(config)
.then((bundle: any) => {
const result = bundle.generate({
format: 'iife'
});
const path = join(Config.TMP_DIR, 'bundle.js');
writeFile(path, result.code, (error: any) => {
if (error) {
console.error(error);
process.exit(0);
}
done();
});
})
.catch((error: any) => {
console.error(error);
process.exit(0);
});
};
问题出在汇总 build.When 我 运行 npm 运行 build.prod.rollup.aot 以上错误开始 appear.But 我修复了 issue.The 问题出在命名导出上。 leaflet-src.js 未导出所需的 modules.So 我在 project.config.ts.
中添加了名为 exports 的缺失内容this.ROLLUP_NAMED_EXPORTS = [
...this.ROLLUP_NAMED_EXPORTS,
{'node_modules/leaflet/dist/leaflet.js': [ 'leaflet' ]},
{'node_modules/leaflet/dist/leaflet-src.js': [ 'latLng', 'map','control' ]},
];
现在一切正常。