importcommonjsfrom'rollup-plugin-commonjs'; importnodeResolvefrom'rollup-plugin-node-resolve'; exportdefault{ input:'main.js', output:{ file:'bundle.js', format:'iife' }, plugins:[ nodeResolve({ jsnext:true, main:true }), commonjs({ ...
Create a rollup.config.js configuration file and import the plugin:import commonjs from "@rollup/plugin-commonjs"; import commonjsNamedExports from "rollup-plugin-commonjs-named-exports"; export default { input: "src/index.js", output: { dir: "output", }, plugins: [commonjs(), commonjs...
然后我们看下正餐rollup的配置文件怎么来搞,其实为什么选择rollup和我喜欢rollup就是因为他的配置太简单了…… import babel from 'rollup-plugin-babel'; import uglify from 'rollup-plugin-uglify'; import commonjs from "rollup-plugin-commonjs"; const isProduction = process.env.NODE_ENV === 'production'...
新建 rollup.config.js 配置文件：import typescript from '@rollup/plugin-typescript'; // 让 rollup 认识 ts 的代码import pkg from './package.json';// 为了将引入的 npm 包，也打包进最终结果中import resolve from 'rollup-plugin-node-resolve';import commonjs from '@rollup/plugin-commonjs';//...
"@babel/plugin-transform-runtime": "^7.19.6", "@babel/preset-env": "^7.18.10", "@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-commonjs": "^23.0.2", "autoprefixer": "^10.4.8", "eslint": "^8.27.0", "eslint-plugin-react": "^7.31.10", ...
所以它的作用是来告诉打包工具,npm包的入口文件是哪个,打包时让打包工具引入哪个文件;这里的文件一般是commonjs(cjs)模块化的。 有一些打包工具,例如webpack或rollup,本身就能直接处理import导入的esm模块,那么我们可以将模块文件打包成esm模块,然后指定module字段;由包的使用者来决定如何引用。
当然你也可以一起安装npm install @babel/core @babel/preset-env @babel/preset-react rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve -D 依赖请参阅npm上的具体内容说明,这里不具体说明。 然后我们在my-react-npm ...
@rollup/plugin-commonjs:用来将 CommonJS 转换成 ES2015 模块 @rollup/plugin-json:让 Rollup 从 JSON 文件中读取数据 rollup-plugin-terser:最后用于混淆代码 更详细的说明可以在这里看到:Rollup 与其他工具集成。 然后,我们在 Rollup 里配置这些插件:
首先我们需要在根目录创建rollup.config.js文件 大家也可以看出来rollup个人感觉配置还是比较简单的 importcommonjsfrom'@rollup/plugin-commonjs';importjsonfrom'@rollup/plugin-json';import{nodeResolve}from'@rollup/plugin-node-resolve';importtypescriptfrom'rollup-plugin-typescript2';importscssfrom'rollup-plugin...
在src目录下，创建文件Button.js和index.js。安装所需依赖，如@babel/core、@babel/preset-env、@babel/preset-react、rollup、@rollup/plugin-babel、@rollup/plugin-commonjs、@rollup/plugin-node-resolve。在my-react-npm文件夹下创建rollup.config.js文件，并配置相关参数。在package.json中添加build...