javascript - Rollup.js how import a js file (not es6 module) without any change (myvar$extrastring) -
first of all, understand why rollup.js need append string @ end of variable avoid collision but... don't understand how "concat/import" simple javascript file not amd/commonjs/es6, simple revealing module !
i have following file structure:
foo.js
var foo = (function () { var somemethod = function () {}; return { somemethod: somemethod }; })(); bar.js
(function(module) { module.bar = "bar"; })(foo); main.js
import "foo.js" import "bar.js" after building, got:
build.js
var foo$1 = (function () { // here problem var somemethod = function () {}; return { somemethod: somemethod }; })(); (function(module) { module.bar = "bar"; })(foo); // ouupss ! so how can got foo instead of foo$1 ? or foo$1 instead of foo bar.js ?
edit:
in case, in main.js, use default import in view override default name:
import foo "foo.js" i got error (normal !):
non-existent export 'default' imported foo.js main.js
it's misunderstanding, after research on stackoverflow , internet found nothing how can resolve tricky problem.
so... in advance !
rollup doesn't concatenate javascript files; transpiles set of es2015 modules functionally equivalent single script. es2015 modules don't function quite modules in other languages (certainly not c/c++ #includes!), and recommend reading them here. if want import regular javascript file, you'll have convert es2015 module, in pinch can done automatically using rollup plugin. instance, poor general solution, put in rollup.config.js:
import replace 'rollup-plugin-replace'; export default { entry: './src/main.js', dest: './dist/bundle.js', plugins: [ replace({ include: './src/main.js', values: { 'var foo =': 'export default' } }) ] }; perhaps there should plugin automatically export things, there doesn't seem one.
es2015 modules don't share scope. thus, when declare variable foo in foo.js, variable doesn't exist in bar.js. when try access variable called foo in bar.js, looks global variable, if hadn't declared in file. renaming foo.js's foo foo$1, rollup ensuring correct behavior preventing foo.js's local foo shadowing global foo.
in order share data between modules, need export things. here's 1 way rewrite example:
foo.js
export default (function () { var somemethod = function () {}; return { somemethod: somemethod }; })(); bar.js
import module './foo.js'; module.bar = "bar"; main.js
import "./bar.js" but code doesn't utilize modules well. you'd more write this:
foo.js
export function somemethod () {} bar.js
export { somemethod } './foo.js'; export const bar = "bar"; main.js
import * bar "./bar.js"; because rollup can infer more how code used when it's shared via imports , exports, can make more intelligent decisions code must kept , can discarded in output without affecting functionality. demonstrated fact outputs no code @ second example. neither 1 anything, rollup can't sure first 1 because complicated things data instead of using exports.
Comments
Post a Comment