Merge pull request #45 from janniks/test-rollup-changes

Revert to old rollup build script

Author: janniks

babel.config.js

@@ -1,16 +1,5 @@
-const devPresets = ["@vue/babel-preset-app"];
-const buildPresets = [
-  [
-    "@babel/preset-env",
-    // Config for @babel/preset-env
-    {
-      // Example: Always transpile optional chaining/nullish coalescing
-      // include: [
-      //   /(optional-chaining|nullish-coalescing)/
-      // ],
-    },
-  ],
-];
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = ['@babel/preset-env'];
 module.exports = {
-  presets: process.env.NODE_ENV === "development" ? devPresets : buildPresets,
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
 };

build/postcss.js

@@ -0,0 +1 @@
+import "../src/styles.css";

build/rollup.config.js

@@ -4,10 +4,11 @@ import path from "path";
 import vue from "rollup-plugin-vue";
 import alias from "@rollup/plugin-alias";
 import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
-import babel from "@rollup/plugin-babel";
+import babel from "rollup-plugin-babel";
+import postcss from "rollup-plugin-postcss";
 import { terser } from "rollup-plugin-terser";
+import postcssLogical from "postcss-logical";
 import minimist from "minimist";
 
 // Get browserslist config and remove ie from es build targets
@@ -17,11 +18,6 @@ const esbrowserslist = fs
   .split("\n")
   .filter((entry) => entry && entry.substring(0, 2) !== "ie");
 
-// Extract babel preset-env config, to combine with esbrowserslist
-const babelPresetEnvConfig = require("../babel.config").presets.filter(
-  (entry) => entry[0] === "@babel/preset-env"
-)[0][1];
-
 const argv = minimist(process.argv.slice(2));
 
 const projectRoot = path.resolve(__dirname, "..");
@@ -31,33 +27,25 @@ const baseConfig = {
   plugins: {
     preVue: [
       alias({
-        entries: [
-          {
-            find: "@",
-            replacement: `${path.resolve(projectRoot, "src")}`,
-          },
-        ],
+        resolve: [".js", ".jsx", ".ts", ".tsx", ".vue"],
+        entries: {
+          "@": path.resolve(projectRoot, "src"),
+        },
       }),
     ],
     replace: {
       "process.env.NODE_ENV": JSON.stringify("production"),
+      "process.env.ES_BUILD": JSON.stringify("false"),
     },
     vue: {
       css: true,
       template: {
         isProduction: true,
       },
     },
-    postVue: [
-      resolve({
-        extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
-      }),
-      commonjs(),
-    ],
     babel: {
       exclude: "node_modules/**",
       extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
-      babelHelpers: "bundled",
     },
   },
 };
@@ -83,30 +71,31 @@ const buildFormats = [];
 if (!argv.format || argv.format === "es") {
   const esConfig = {
     ...baseConfig,
-    input: "src/entry.esm.js",
     external,
     output: {
-      file: "dist/esm.js", // custom
-      format: "esm",
+      file: "dist/esm.js",
+      format: "es",
       exports: "named",
     },
     plugins: [
-      replace(baseConfig.plugins.replace),
+      replace({
+        ...baseConfig.plugins.replace,
+        "process.env.ES_BUILD": JSON.stringify("true"),
+      }),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
-      ...baseConfig.plugins.postVue,
       babel({
         ...baseConfig.plugins.babel,
         presets: [
           [
             "@babel/preset-env",
             {
-              ...babelPresetEnvConfig,
               targets: esbrowserslist,
             },
           ],
         ],
       }),
+      commonjs(),
     ],
   };
   buildFormats.push(esConfig);
@@ -118,10 +107,10 @@ if (!argv.format || argv.format === "cjs") {
     external,
     output: {
       compact: true,
-      file: "dist/ssr.js", // custom
+      file: "dist/ssr.js",
       format: "cjs",
       name: "VueNotion",
-      exports: "auto",
+      exports: "named",
       globals,
     },
     plugins: [
@@ -134,8 +123,8 @@ if (!argv.format || argv.format === "cjs") {
           optimizeSSR: true,
         },
       }),
-      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
+      commonjs(),
     ],
   };
   buildFormats.push(umdConfig);
@@ -147,18 +136,18 @@ if (!argv.format || argv.format === "iife") {
     external,
     output: {
       compact: true,
-      file: "dist/min.js", // custom
+      file: "dist/min.js",
       format: "iife",
       name: "VueNotion",
-      exports: "auto",
+      exports: "named",
       globals,
     },
     plugins: [
       replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
-      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
+      commonjs(),
       terser({
         output: {
           ecma: 5,
@@ -169,5 +158,28 @@ if (!argv.format || argv.format === "iife") {
   buildFormats.push(unpkgConfig);
 }
 
+if (!argv.format || argv.format === "postcss") {
+  const postCssConfig = {
+    input: "build/postcss.js",
+    output: {
+      format: "es",
+      file: "dist/styles.ignore",
+    },
+    plugins: [
+      postcss({
+        extract: true,
+        minimize: true,
+        plugins: [postcssLogical()],
+      }),
+    ],
+  };
+  buildFormats.push(postCssConfig);
+}
+
 // Export config
-export default buildFormats;
+export default (commandLineArgs) => {
+  // Exporting a method enables command line args override
+  // https://rollupjs.org/guide/en/#configuration-files
+  delete commandLineArgs.format;
+  return buildFormats;
+};

dev/serve.js

@@ -1,8 +1,8 @@
-import Vue from "vue";
-import Dev from "./serve.vue";
+import Vue from 'vue';
+import Dev from './serve.vue';
 
 Vue.config.productionTip = false;
 
 new Vue({
   render: (h) => h(Dev),
-}).$mount("#app");
+}).$mount('#app');

dev/serve.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { NotionRenderer, getPageBlocks } from "@/entry.esm";
+import { NotionRenderer, getPageBlocks } from "@/entry";
 
 import "prismjs";
 import "prismjs/themes/prism.css";