{"id":304,"date":"2022-07-21T23:05:56","date_gmt":"2022-07-21T15:05:56","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=304"},"modified":"2022-06-16T20:07:22","modified_gmt":"2022-06-16T12:07:22","slug":"rollup%e6%90%ad%e5%bb%ba%e9%a1%b9%e7%9b%ae","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2022\/07\/21\/rollup%e6%90%ad%e5%bb%ba%e9%a1%b9%e7%9b%ae\/","title":{"rendered":"rollup\u642d\u5efa\u9879\u76ee"},"content":{"rendered":"

\u73b0\u5728\u7684\u9879\u76ee\u57fa\u672c\u90fd\u5f00\u59cb\u7528rollup\u642d\u5efa\u7684\uff0c\u5f88\u5feb\u8981\u653e\u5f03webpack\u4e86\u3002<\/p>\n

\u521d\u59cb\u5316<\/h3>\n
npm init<\/code><\/pre>\n
\u63a5\u7740\u6309\u7167\u6b65\u9aa4\u586b\u5165\u4fe1\u606f\uff0c\u751f\u6210package.json<\/em>\uff0c\u9ed8\u8ba4\u5165\u53e3\u4e3amain.js<\/em>\uff0c\u6682\u65f6\u5199\u6210main.js<\/em>\uff0c\u540e\u9762\u4f1a\u4fee\u6539\u5165\u53e3\u6587\u4ef6\u4e3a\u7f16\u8bd1\u540e\u7684\u6587\u4ef6<\/p>\n
\u5728\u6839\u76ee\u5f55\u65b0\u5efasrc<\/em>\u6587\u4ef6\u5939\uff0c\u5728src<\/em>\u6587\u4ef6\u5939\u4e0b\u65b0\u5efamain.ts<\/em>\u6587\u4ef6\uff1a<\/p>\n
export function hello () { \n    console.log('hello indeex') \n}<\/code><\/pre>\n
\u914d\u7f6erollup<\/h3>\n
\u5b89\u88c5typescript<\/em>\u3001rollup<\/em>\uff1a<\/p>\n
npm i -D typescript\n\nnpm i -S rollup<\/code><\/pre>\n
\u914d\u7f6eeslint<\/h3>\n
\u5b89\u88c5eslint<\/em>\uff1a<\/p>\n
npm i -D eslint<\/code><\/pre>\n
\u751f\u6210eslint\u914d\u7f6e\u6587\u4ef6\uff08\u8fd9\u4e2a\u8fc7\u7a0b\u6709\u70b9\u957f\ud83d\ude01\uff09\uff1a<\/p>\n
.\/node_modules\/.bin\/eslint --init<\/code><\/pre>\n
\u63d0\u793a\u9700\u8981\uff1a<\/p>\n
Need to install the following packages:\n  @eslint\/create-config<\/code><\/pre>\n
\u786e\u8ba4\u540e\u6839\u636e\u9700\u6c42\u9009\u62e9\u4e0d\u540c\u914d\u7f6e\uff0c\u6709\u4e09\u4e2d\u914d\u7f6e\uff1a<\/p>\n
? How would you like to use ESLint? \u2026 \n  To check syntax only\n  To check syntax and find problems\n\u276f To check syntax, find problems, and enforce code style<\/code><\/pre>\n
\u9009\u62e9To check syntax, find problems, and enforce code style\uff08\u68c0\u67e5\u8bed\u6cd5\u683c\u5f0f\u3001\u67e5\u627e\u95ee\u9898\u3001\u7edf\u4e00\u4ee3\u7801\u98ce\u683c\uff09<\/em>\uff0c\u8be6\u7ec6\u89c4\u5219\u914d\u7f6e\u89c1eslint\u6587\u6863<\/a>\u548ctslint\u6587\u6863<\/a><\/p>\n
\u63a5\u7740\u6709\u4e09\u79cd\u4e0d\u540c\u6a21\u5f0f\uff1a<\/p>\n
? What type of modules does your project use? \u2026 \n\u276f JavaScript modules (import\/export)\n  CommonJS (require\/exports)\n  None of these<\/code><\/pre>\n
\u9009\u62e9JavaScript modules (import\/export)<\/em><\/p>\n
\u63a5\u7740\u662f\u5e93\u7684\u9009\u62e9\uff1a<\/p>\n
? Which framework does your project use? \u2026 \n  React\n  Vue.js\n\u276f None of these<\/code><\/pre>\n
\u6839\u636e\u9700\u6c42\u9009\u62e9\u76f8\u5e94\u5e93\uff0c\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528\u5e93\uff0c\u540e\u671f\u518d\u914d\u7f6e\uff0c\u6bd4\u5982\u540e\u671f\u914d\u7f6e\u4f7f\u7528svelte<\/em>\u5e93<\/p>\n
\u63a5\u7740\u9009\u62e9\u7f16\u7a0b\u8bed\u8a00\uff1a<\/p>\n
? Does your project use TypeScript? \u203a No \/ Yes<\/code><\/pre>\n
\u9009\u62e9Yes<\/em>\u3002Yes<\/em>\u4f7f\u7528Typescript\uff0cNo<\/em>\u4f7f\u7528Javascript\uff08ECMA 262\u5373ECMAScript\uff09<\/p>\n
\u63a5\u7740\u9009\u62e9\u8fd0\u884c\u73af\u5883\uff1a<\/p>\n
? Where does your code run? \u2026  (Press <space> to select, <a> to toggle all, <i> to invert selection)\n\u2714 Browser\n\u2714 Node<\/code><\/pre>\n
\u9009\u62e9Browser<\/em>\u3002\u4e5f\u53ef\u4ee5\u9009\u62e9\u975e\u6d4f\u89c8\u5668\u73af\u5883<\/p>\n
\u63a5\u7740\u9009\u62e9\u6837\u5f0f\uff1a<\/p>\n
? How would you like to define a style for your project? \u2026 \n  Use a popular style guide\n\u276f Answer questions about your style<\/code><\/pre>\n
\u9009\u62e9Answer questions about your style<\/em>\uff0c\u7531\u4e8e\u662f\u7a7a\u9879\u76ee\uff0c\u8fd9\u91cc\u4f1a\u5c11\u4e00\u4e2a\u68c0\u6d4b\u73b0\u6709\u9879\u76ee\u5e76\u81ea\u52a8\u751f\u6210\u7684\u9009\u9879<\/p>\n
\u63a5\u7740\u9009\u62e9\u683c\u5f0f\u5316\u4ee3\u7801\u65b9\u5f0f\uff1a<\/p>\n
? What format do you want your config file to be in? \u2026 \n\u276f JavaScript\n  YAML\n  JSON<\/code><\/pre>\n
\u9009\u62e9JavaScript<\/em><\/p>\n
\u63a5\u7740\u9009\u62e9\u4ee3\u7801\u7f29\u8fdb\u65b9\u5f0f\uff1a<\/p>\n
? What style of indentation do you use? \u2026 \n\u276f Tabs\n  Spaces<\/code><\/pre>\n
\u9009\u62e9Tabs<\/em><\/p>\n
\u63a5\u7740\u9009\u62e9\u5b57\u7b26\u4e32\u5355\u53cc\u5f15\u53f7\uff1a<\/p>\n
? What quotes do you use for strings? \u2026 \n  Double\n\u276f Single<\/code><\/pre>\n
\u9009\u62e9Single<\/em>\u3002\u4f9d\u636e\u56e2\u961f\u6216\u4e2a\u4eba\u4e60\u60ef\u9009\u62e9\u3002\u53cc\u5f15\u53f7\u8981\u4f7f\u7528Shift+\u5355\u5f15\u53f7<\/em> \u7ec4\u5408\u952e<\/strong>\uff0c\u6ca1\u6709\u5355\u5f15\u53f7\u6309\u952e\u65b9\u4fbf\uff0c\u4f46\u53cc\u5f15\u53f7\u662f\u5f88\u591a\u56e2\u961f\u7684\u4ee3\u7801\u89c4\u8303<\/p>\n
\u63a5\u7740\u662f\u5355\u7eaf\u7684\u8be2\u95ee\u4f7f\u7528\u7684\u64cd\u4f5c\u7cfb\u7edf\uff1a<\/p>\n
? What line endings do you use? \u2026 \n\u276f Unix\n  Windows<\/code><\/pre>\n
\u9009\u62e9Unix<\/em><\/p>\n
\u7ed3\u5c3e\u52a0\u4e0d\u52a0\u82f1\u6587\u5206\u53f7\uff1a<\/p>\n
? Do you require semicolons? \u203a No \/ Yes<\/code><\/pre>\n
\u9009\u62e9Yes<\/em><\/p>\n
\u63a5\u7740\u662f\u5355\u7eaf\u7684\u8be2\u95ee\u4f7f\u7528\u7684\u64cd\u4f5c\u7cfb\u7edf\uff1a<\/p>\n
? What line endings do you use? \u2026 \n\u276f Unix\n  Windows<\/code><\/pre>\n
\u9009\u62e9Unix<\/em>\u3002\u63d0\u793a\u9700\u8981\u4f9d\u8d56\uff1a<\/p>\n
The config that you've selected requires the following dependencies:\n\neslint-plugin-react@latest @typescript-eslint\/eslint-plugin@latest @typescript-eslint\/parser@latest<\/code><\/pre>\n
\u63a5\u7740\u662f\u8be2\u95ee\u8981\u4e0d\u8981\u5b89\u88c5\uff1a<\/p>\n
? Would you like to install them now? \u203a No \/ Yes<\/code><\/pre>\n
\u9009\u62e9Yes<\/em><\/p>\n
\u6700\u540e\u8fd8\u8981\u8be2\u95ee\u7528\u4ec0\u4e48\u5b89\u88c5\uff1a<\/p>\n
? Which package manager do you want to use? \u2026 \n\u276f npm\n  yarn\n  pnpm<\/code><\/pre>\n
\u54ea\u4e2a\u5b89\u88c5\u7684\u5feb\u7528\u54ea\u4e2a\u3002<\/p>\n
\u9009\u62e9\u540e\u4f1a\u663e\u793a\u8981\u5b89\u88c5\u7684\u4f9d\u8d56\uff1a<\/p>\n
Installing eslint-plugin-react@latest, @typescript-eslint\/eslint-plugin@latest, @typescript-eslint\/parser@latest<\/code><\/pre>\n
\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u4f1a\u751f\u6210\u914d\u7f6e\u6587\u4ef6.eslintrc.js<\/em>\uff0c\u5e76\u81ea\u52a8\u5f00\u59cb\u5b89\u88c5\u76f8\u5e94\u4f9d\u8d56\uff0c\u81ea\u52a8\u5b89\u88c5\u5931\u8d25\uff0c\u5c31\u624b\u52a8\u5b89\u88c5\u4e00\u904d\u4e0a\u9762\u63d0\u793a\u7684\u4f9d\u8d56<\/p>\n
\u914d\u7f6e\u5ffd\u7565\u6587\u4ef6<\/h3>\n
\u5728\u6839\u76ee\u5f55\u65b0\u5efa.eslintignore<\/em>\u6587\u4ef6\uff1a<\/p>\n
dist\/**\nnode_modules\/**<\/code><\/pre>\n
\u5728\u6839\u76ee\u5f55\u65b0\u5efa.gitignore<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/node_modules\n\n\/dist\n\n# production\n\/build\n\n# misc\n.DS_Store\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.*.local\n\n# typescript\n*.tsbuildinfo\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?<\/code><\/pre>\n
\u914d\u7f6ebabel<\/h3>\n
\u5b89\u88c5\u4f9d\u8d56\uff1a<\/p>\n
# \u5220\u9664\u6587\u4ef6\u4f9d\u8d56\nnpm i -D rimraf\n\n# typescript\u7f16\u8bd1\u4f9d\u8d56\nnpm i -D rollup-plugin-typescript2\n\n# rollup\u4f9d\u8d56\nnpm i -D @rollup\/plugin-node-resolve @rollup\/plugin-commonjs rollup rollup-plugin-terser\n\n# babel\u4f9d\u8d56\nnpm i -D @babel\/core @rollup\/plugin-babel @babel\/preset-env @babel\/plugin-transform-runtime<\/code><\/pre>\n
\n
@rollup\/plugin-commonjs<\/em>\u4f9d\u8d56\u4e3a\u4e86\u8ba9\u6253\u5305\u540e\u7684\u8f93\u51fa\u6587\u4ef6\u6709commonjs<\/em>\u3001esm(ecmascript module)<\/em>\u3001umd<\/em>\u4e09\u79cd\u6a21\u5f0f<\/p>\n<\/blockquote>\n
\u4fee\u6539package.json<\/em>\uff1a<\/p>\n
"main": ".\/dist\/index.js",\/\/rollup.config.js\u4e2d\u8bbe\u7f6e\u7684commonjs\u6a21\u5f0f\u6253\u5305\u51fa\u7684\u6587\u4ef6\n"module": ".\/dist\/index.esm.js",\n"umd": ".\/dist\/index.umd.js",\n"types": ".\/dist\/types\/index.d.ts",\/\/\u7c7b\u578b\u58f0\u660e\u6587\u4ef6\u5165\u53e3<\/code><\/pre>\n
\u4fee\u6539rollup.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/*\n * @Author: indeex\n * @Date: 2019-06-16 21:29:23\n * @Email: indeex@qq.com\n *\/\nimport path from 'path'\nimport resolve from '@rollup\/plugin-node-resolve'\nimport commonjs from '@rollup\/plugin-commonjs'\nimport rollupTypescript from 'rollup-plugin-typescript2'\nimport babel from '@rollup\/plugin-babel'\nimport { DEFAULT_EXTENSIONS } from '@babel\/core'\nimport { terser } from 'rollup-plugin-terser'\nimport pkg from '.\/package.json'\n\nconst env = process.env.NODE_ENV\nconst name = "RollupTypescript"\n\nconst config = {\n    input: path.resolve(__dirname, "src\/main.ts"),\n    output: [\n        \/\/commonjs\n        {\n            file: pkg.main,\n            format: 'cjs',\n        },\n        \/\/esm\n        {\n            file: pkg.module,\n            format: 'es',\n        },\n        \/\/umd\n        \/\/ {\n        \/\/     file: pkg.umd,\n        \/\/     format: 'umd'\n        \/\/ },\n    ],\n    plugins: [\n        resolve(),\/\/\u89e3\u6790\u7b2c\u4e09\u65b9\u4f9d\u8d56\n        commonjs(),\/\/\u8bc6\u522bcommonj\u548c\u7b2c\u4e09\u65b9\u4f9d\u8d56\n        rollupTypescript(),\/\/rollup\u7f16\u8bd1typescript\n        babel({\n            babelHelpers: 'runtime',\/\/\u4f7f\u7528runtime\u7f16\u8bd1\u5e93\n            exclude: 'node_modules\/**',\n            extensions: [\n                ...DEFAULT_EXTENSIONS,\n                '.ts',\n            ],\n        }),\n    ],\n}\n\n\/\/ \u5bf9\u751f\u4ea7\u73af\u5883\u8fdb\u884c\u4ee3\u7801\u538b\u7f29\nif (env === 'production') {\n    config.plugins.push(terser({\n        compress: {\n            pure_getters: true,\n            unsafe: true,\n            unsafe_comps: true,\n            warnings: false,\n        },\n    }))\n}\n\nexport default config<\/code><\/pre>\n
\u5728\u6839\u76ee\u5f55\uff0c\u65b0\u5efatsconfig.json<\/em>\u6587\u4ef6\uff1a<\/p>\n
{ \n    "compilerOptions": \n        { \n            \/* \u57fa\u7840\u9009\u9879 *\/ \n            "target": "esnext", \/* \u6307\u5b9a ECMAScript \u76ee\u6807\u7248\u672c\uff1a'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. *\/ \n            "module": "esnext", \/* \u8f93\u51fa\u7684\u4ee3\u7801\u4f7f\u7528\u4ec0\u4e48\u65b9\u5f0f\u8fdb\u884c\u6a21\u5757\u5316\uff1a 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. *\/ \n            "lib": [ \/* \u6307\u5b9a\u5f15\u7528\u7684\u6807\u51c6\u5e93 *\/ \n                "esnext", \n                "dom", \n                "dom.iterable", \n            ], \n            "allowJs": true,  \/* \u5141\u8bb8\u7f16\u8bd1 js \u6587\u4ef6 *\/ \n            "removeComments": true, \/* \u8f93\u51fa\u4e0d\u5305\u542b\u6ce8\u91ca *\/ \n            \/* \u4e25\u683c\u7c7b\u578b\u68c0\u67e5\u9009\u9879 *\/ "strict": true, \/* \u542f\u7528\u6240\u6709\u4e25\u683c\u7c7b\u578b\u68c0\u67e5\u9009\u9879 *\/ \n            "noImplicitAny": true, \/* \u68c0\u67e5\u9690\u542b any \u7c7b\u578b\u7684\u8868\u8fbe\u5f0f\u548c\u58f0\u660e *\/\n            "strictNullChecks": false, \/* \u4e25\u683c\u7a7a\u68c0\u67e5. *\/ \n            \/* \u989d\u5916\u68c0\u67e5 *\/ \n            "noUnusedLocals": true, \/* \u68c0\u67e5\u65e0\u7528\u7684\u53d8\u91cf. *\/ \n            \/* Module Resolution Options *\/ \n            "moduleResolution": "node", \/* \u6307\u5b9a\u6a21\u5757\u67e5\u627e\u7b56\u7565\uff1a 'node' (Node.js) or 'classic' (TypeScript pre-1.6) *\/ \n            "baseUrl": ".\/", \/* \u67e5\u627e\u6a21\u5757\u7684\u57fa\u7840\u76ee\u5f55 *\/ \n            "paths": { \n                "@\/*": [ \n                    "src\/*" \n                ] \n            }, \/* \u8bb0\u5f55 baseUrl \u7684\u6a21\u5757\u8def\u5f84\u67e5\u627e\u522b\u540d *\/ "types": [], \/* \u7c7b\u578b\u58f0\u660e\u6587\u4ef6 *\/ \n            "allowSyntheticDefaultImports": true,\n            "jsx": "preserve"\n        },\n    "include": [ \n        \/* \u6307\u5b9a\u7f16\u8bd1\u5904\u7406\u7684\u6587\u4ef6\u5217\u8868 *\/ \n        "src\/**\/*",\n        "src\/types.ts"\n    ],\n    "exclude": ["node_modules", "config", "dist", "public"]\n}<\/code><\/pre>\n
\u5728\u6839\u76ee\u5f55\uff0c\u65b0\u5efatsconfig.types.json<\/em>\u6587\u4ef6\uff1a<\/p>\n
{ \n    \/\/ \u7ee7\u627f tsconfig.json \u4e2d\u7684\u901a\u7528\u914d\u7f6e \n    "extends": ".\/tsconfig.json", \n    "compilerOptions": { \n        "declaration": true, \/* \u751f\u6210\u76f8\u5e94\u7684 '.d.ts' file. *\/ \n        "declarationDir": ".\/dist\/types", \/* \u7c7b\u578b\u58f0\u660e\u6587\u4ef6\u8f93\u51fa\u76ee\u5f55 *\/\n        "emitDeclarationOnly": true, \/* \u53ea\u751f\u6210\u58f0\u660e\u6587\u4ef6\uff0c\u4e0d\u751f\u6210 js \u6587\u4ef6*\/ \n        "rootDir": ".\/src", \/* \u6307\u5b9a\u8f93\u51fa\u6587\u4ef6\u76ee\u5f55\uff08\u7528\u4e8e\u8f93\u51fa\uff09\uff0c\u7528\u4e8e\u63a7\u5236\u8f93\u51fa\u76ee\u5f55\u7ed3\u6784 *\/ \n    } \n}<\/code><\/pre>\n
\u5728\u6839\u76ee\u5f55\uff0c\u65b0\u5efababel.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
module.exports = { \n    "presets": [ \n        [ \n            "@babel\/preset-env", \n            { \n                \/* Babel \u4f1a\u5728 Rollup \u6709\u673a\u4f1a\u505a\u5904\u7406\u4e4b\u524d\uff0c\u5c06\u6211\u4eec\u7684\u6a21\u5757\u8f6c\u6210 CommonJS\uff0c\u5bfc\u81f4 Rollup \u7684\u4e00\u4e9b\u5904\u7406\u5931\u8d25 *\/ \n                "modules": false \n            } \n        ] \n    ], \n    "plugins": [ \n        [ \n            \/\/ \u4e0e babelHelpers: 'runtime' \u914d\u5408\u4f7f\u7528 \n            "@babel\/plugin-transform-runtime" \n        ] \n    ] \n}<\/code><\/pre>\n
\n
babel.config.js\u4f1a\u5f71\u54cd\u6574\u4e2a\u9879\u76ee\u4e2d\u7684\u4ee3\u7801\uff0c\u5305\u542bnode_modules\u4e2d\u7684\u4ee3\u7801
\nbabelrc \u53ea\u4f1a\u5f71\u54cd\u672c\u9879\u76ee\u4e2d\u7684\u4ee3\u7801\uff0c\u6ce8\u610f\u5982\u679c\u8981\u4f7f\u7528.babelrc<\/em>\u914d\u7f6e\uff0c\u8bf7\u5728src<\/em>\u4e0b\u521b\u5efa.babelrc<\/em>\u6587\u4ef6<\/p>\n<\/blockquote>\n
\u4fee\u6539package.json<\/em>\u4e2dscripts<\/em>\u5b57\u6bb5\u5e76\u589e\u52a0files<\/em>\u5b57\u6bb5\uff1a<\/p>\n
"scripts": {\n    "clean:dist": "rimraf dist",\/\/\u6e05\u7a7adist\u6253\u5305\u76ee\u5f55\n    "build:types": "npm run clean:dist && tsc -b .\/tsconfig.types.json",\/\/\u7f16\u8bd1ts\u7c7b\u578b\u58f0\u660e\u6587\u4ef6\n    "build": "npm run build:types && rollup -c",\n    "test": "node test\/test.js",\n    "pretest": "npm run build"\/\/\u6267\u884ctest\u547d\u4ee4\u65f6\u7981\u6b62\u8be5\u547d\u4ee4\n},\n"files": ["dist"],<\/code><\/pre>\n
\u5728\u7ec8\u7aef\u6d4b\u8bd5\uff1a<\/p>\n
npm run build<\/code><\/pre>\n
\u4f1a\u751f\u6210dist<\/em>\u6587\u4ef6\u5939\uff0c\u6587\u4ef6\u5939\u5185\u6709index.js<\/em>\u6587\u4ef6\u3001index.esm.js<\/em>\u6587\u4ef6\u3001\u7c7b\u578b\u58f0\u660e\u6587\u4ef6<\/p>\n
test<\/h3>\n
\u5728\u6839\u76ee\u5f55\u65b0\u5efatest<\/em>\u6587\u4ef6\u5939\uff0c\u5728\u6587\u4ef6\u5939\u4e0b\u65b0\u5efatest.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
const { hello } = require('..\/dist\/index.js')\nhello()<\/code><\/pre>\n
\u5728\u7ec8\u7aef\u6d4b\u8bd5\uff1a<\/p>\n
npm run test<\/code><\/pre>\n
\u4f1a\u5728\u7ec8\u7aef\u6253\u5370hello indeex<\/em><\/p>\n
postcss\u548c\u9884\u5904\u7406\u5668<\/h3>\n
rollup-plugin-postcss<\/em>\u652f\u6301Sass<\/em>\u3001Less<\/em>\u548cStylus<\/em><\/p>\n
# postcss\nnpm i -D postcss rollup-plugin-postcss\n\n# sass\nnpm i -D node-sass\n\n# or less\nnpm i -D less\n\n# or stylus\nnpm i -D stylus<\/code><\/pre>\n
\n
\u5982\u679c\u5b89\u88c5node-sass<\/em>\u6709\u95ee\u9898\uff0c\u53ef\u4ee5\u66f4\u6362\u5176\u4ed6\u9884\u5904\u7406\u5668<\/p>\n<\/blockquote>\n
\u4fee\u6539rollup.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\nimport postcss from 'rollup-plugin-postcss'\nimport sass from 'node-sass'\n\n\/\/...\nplugins: [\n    \/\/...\n    postcss({\n        modules: true,\/\/\u5f00\u542fcss modules\uff0c.module.css .module.sss .module.scss .module.sass .module.styl .module.stylus .module.less\n        extract: true,\n        minimize: productEnv,\n        extensions: ['css', 'scss', 'sass'],\n        process: processSass,\n    }),\n],<\/code><\/pre>\n
css\u6d4f\u89c8\u5668\u81ea\u52a8\u8865\u5168<\/h3>\n
npm i -D autoprefixer<\/code><\/pre>\n
\u4fee\u6539rollup.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\nimport autoprefixer from 'autoprefixer'\n\n\/\/...\nplugins: [\n    \/\/...\n     postcss({\n        \/\/...\n        plugins: [\n            autoprefixer(),\n        ],\n    }),\n],<\/code><\/pre>\n
\u4fee\u6539package.json<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\n"browserslist": [\n    "defaults",\n    "not ie < 8",\n    "last 2 versions",\n    "> 1%",\n    "iOS 7",\n    "last 3 iOS versions"\n]<\/code><\/pre>\n
\u672c\u5730\u670d\u52a1\u5668<\/h3>\n
npm install -D rollup-plugin-serve<\/code><\/pre>\n
\u4fee\u6539rollup.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\nimport serve from 'rollup-plugin-serve'\n\n\/\/...\nplugins: [\n    \/\/...\n    serve({\n        open: true,\n        contentBase: "public",\n        host: "localhost",\n        port: 9999,\n    }),\n],<\/code><\/pre>\n
\u5728\u6839\u76ee\u5f55\u4e0b\u65b0\u5efapublic<\/em>\u6587\u4ef6\u5939\uff0c\u5728\u6b64\u6587\u4ef6\u5939\u4e0b\u65b0\u5efaindex.html<\/em>\u6587\u4ef6\uff0c\u914d\u7f6e\u9875\u9762\u4e2d\u7684logo icon<\/p>\n
\u8fd0\u884cnpm run build<\/em>\u4f1a\u542f\u52a8\u672c\u5730\u670d\u52a1\u5668\u5e76\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u5e76\u770b\u5230\u9875\u9762<\/p>\n
\u5f00\u53d1\u73af\u5883\u548c\u751f\u4ea7\u73af\u5883<\/h3>\n
\u5728\u6839\u76ee\u5f55\u4e0b\u65b0\u5efarollup.config.dev.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
import serve from 'rollup-plugin-serve'\nimport config from '.\/rollup.config'\n\nconst indexPath = 'public\/index.html'\n\nconfig.plugins = [\n    ...config.plugins,\n    serve({\n        host: "localhost",\n        port: 9998,\n        onListening: (server) => {\n            const address = server.address()\n            const host = address.address === '::' ? 'localhost' : address.address\n            const protocol = server.https ? 'https' : 'http'\n            console.log(`Server listening at ${protocol}:\/\/${host}:${address.port}`)\n        }\n    }),\n]\n\nmodule.exports = config<\/code><\/pre>\n
\u5728\u6839\u76ee\u5f55\u4e0b\u65b0\u5efarollup.config.prod.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
import config from '.\/rollup.config'\n\nprocess.env.NODE_ENV = 'production'\n\nconfig.output.sourcemap = false\nconfig.plugins = [...config.plugins]\n\nmodule.exports = config<\/code><\/pre>\n
\u5c06\u6240\u6709\u7684rollup.config<\/em>\u5f00\u5934\u7684\u914d\u7f6e\u79fb\u52a8\u5230\u6839\u76ee\u5f55\u7684config<\/em>\u6587\u4ef6\u5939\u4e0b\uff0c\u4fee\u6539rollup.config.js<\/em>\uff1a<\/p>\n
\/\/\u4fee\u6539\u8def\u5f84\nimport pkg from '.\/..\/package.json'\n\n\/\/\u4fee\u6539\u5165\u53e3\u8def\u5f84\nconst config = {\n    input: path.resolve( path.resolve(__dirname), '..', 'src\/main.ts'),\n}<\/code><\/pre>\n
\u4fee\u6539.eslintrc.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
module.exports = {\n    \/\/...\n    'settings': {\n        'react': {\n            'version': 'detect'\n        }\n    }\n};<\/code><\/pre>\n
\u4fee\u6539package.json<\/em>\u6587\u4ef6\u7684scripts<\/em>\u5b57\u6bb5\uff1a<\/p>\n
 "scripts": {\n    "dev": "npm run lint && rollup -w -c .\/config\/rollup.config.dev.js",\n    "clean:dist": "rimraf dist",\n    "build:types": "npm run clean:dist && tsc -b .\/tsconfig.types.json",\n    "build": "npm run build:types && npm run lint && rollup -c .\/config\/rollup.config.prod.js",\n    "test": "node test\/test.js",\n    "pretest": "npm run build",\n    "lint": "eslint --fix --ext .ts,.js src"\n},<\/code><\/pre>\n
\u4ee3\u7801\u6df7\u6dc6<\/h3>\n
npm i -D rollup-plugin-uglify<\/code><\/pre>\n
\u4fee\u6539rollup.config.prod.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\nimport {uglify} from 'rollup-plugin-uglify'\n\n\/\/...\nconfig.plugins = [...config.plugins, uglify({sourcemap: false})]<\/code><\/pre>\n
\u70ed\u66f4\u65b0<\/h3>\n
npm i -D rollup-plugin-livereload<\/code><\/pre>\n
\u4fee\u6539rollup.config.dev.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\nimport livereload from 'rollup-plugin-livereload'\n\n\/\/...\nconfig.plugins = [\n    \/\/...\n    livereload(),\n]<\/code><\/pre>\n
alias\u522b\u540d<\/h3>\n
npm i -D @rollup\/plugin-alias<\/code><\/pre>\n
\u4fee\u6539rollup.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\nimport alias from '@rollup\/plugin-alias'\n\n\/\/...\nplugins: [\n    \/\/...\n    alias({\n        entries: [\n            {\n                find: "@",\n                replacement: path.resolve(path.resolve(__dirname), "..", "src"),\n            },\n            {\n                find: "src",\n                replacement: path.resolve(path.resolve(__dirname), "..", "src"),\n            },\n        ],\n        customResolver,\n    }),\n],<\/code><\/pre>\n
\u4ee3\u7801\u683c\u5f0f\u5316<\/h3>\n
npm i -D prettier rollup-plugin-prettier<\/code><\/pre>\n
\u5728\u6839\u76ee\u5f55\u4e0b\u65b0\u5efa.prettierrc.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
module.exports = {\n    printWidth: 100,\n    singleQuote: true,\n    trailingComma: 'none',\n    bracketSpacing: true,\n    bracketSameLine: true,\n    tabWidth: 4,\n    arrowParens: "always",\n}<\/code><\/pre>\n
\u4fee\u6539rollup.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
\/\/...\nimport prettier from 'rollup-plugin-prettier'\nconst prettierConfig = path.resolve(path.resolve(__dirname), '..', '.prettierrc.js');\n\n\/\/...\nplugins: [\n    \/\/...\n    prettier(prettierConfig),\n],<\/code><\/pre>\n
polyfill<\/h3>\n
\u7531\u4e8ebabel<\/em>\u65e0\u6cd5\u8f6c\u6362\u6240\u6709\u65b0\u8bed\u6cd5\uff0c\u5982Map<\/em>\uff0c\u9700\u8981\u4f7f\u7528babel-polyfill<\/em>\uff1a<\/p>\n
npm i -D core-js regenerator-runtime<\/code><\/pre>\n
\u4fee\u6539babel.config.js<\/em>\u6587\u4ef6\uff1a<\/p>\n
module.exports = {\n    "presets": [\n        [\n            "@babel\/preset-env",\n            {\n                "useBuiltIns": "usage",\/\/\u6309\u9700\u52a0\u8f7dpolyfill\n                "corejs": {\n                    "version": 3\n                },\n            }\n        ]\n    ],\n    \/\/...\n}<\/code><\/pre>\n
\u5982\u679c\u4e0d\u9700\u8981\u6846\u67b6\u57fa\u672c\u5b8c\u6210\u4e86\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528html\u548c\u7f16\u8bd1\u7684js\u548ccss\u6587\u4ef6<\/p>\n
code enjoy! \ud83e\udd96\ud83e\udd96\ud83e\udd96<\/p>\n
\u4f5c\u8005\uff1aindeex  <\/p>\n
\u94fe\u63a5\uff1ahttps:\/\/indeex.club<\/a>  <\/p>\n
\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u73b0\u5728\u7684\u9879\u76ee\u57fa\u672c\u90fd\u5f00\u59cb\u7528rollup\u642d\u5efa\u7684\uff0c\u5f88\u5feb\u8981\u653e\u5f03webpack\u4e86\u3002 \u521d\u59cb\u5316 npm init \u63a5Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4,5],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/304"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":2,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/304\/revisions\/306"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}