导入 npm 包

Question

我应该如何导入 npm 包？如果我只是添加 lodash 捆绑从 6 毫秒到 900 毫秒！？有没有办法缓存静态依赖？如果我将 lodash 添加到 external、globals 和 customResolveOptions 中的 rollup.config.js，它就会被排除在捆绑包之外。但是我怎样才能将它添加到 libs.js 文件中呢？

这是我的文件：

app.js

import _ from 'lodash'

alert(_.concat(["hi", "hello"]))

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/index.js',
    output: {
        file: 'scripts/bundle.js',
        format: 'iife',
        sourcemap: true
    },
    plugins: [
        resolve(),
        commonjs(),
        babel({
          exclude: 'node_modules/**'
        }),
        production && uglify()
    ]
};

package.json

{
  "devDependencies": {
    "npm-run-all": "^4.1.2",
    "rollup": "^0.55.5",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^3.0.0",
    "babel-core": "^6.26.3",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-env": "^1.7.0",
    "rollup-plugin-babel": "^3.0.4"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  },
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "dev": "npm-run-all --parallel watch"
  },
  ...
}

Answer 1

您可以手动分离 "libs" 的入口点和源代码以加快构建速度：

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';

const production = !process.env.ROLLUP_WATCH;

export default [{
    input: 'src/index.js',
    output: {
        file: 'scripts/bundle.js',
        format: 'iife',
        sourcemap: true,
        globals: {
            'lodash': '_',
        },
    },
    external: ['lodash'],
    plugins: [
        babel(),
        production && uglify()
    ]
}, {
    input: 'src/common.js',
    output: {
        file: 'scripts/common.js',
        format: 'umd',
        name: 'window',
        extend: true,
        sourcemap: true
    },
    plugins: [
        resolve(),
        commonjs(),
        production && uglify()
    ]
}];

common.js

export { default as _ } from 'lodash'

它确实增加了使用库维护 common.js 文件的开销。就个人而言，我发现它可以最好地控制文件大小和编译时间。如果你经常安装和包含新的 npm 包，这将很难维护。

导入 npm 包

Import npm packages

rollupjs