fix(babel-plugin): transform into friendly chunk name

gregberge · Oct 31, 2018 · 54422cb · 54422cb
1 parent 8539abe
commit 54422cb
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/packages/babel-plugin/src/__snapshots__/index.test.js.snap b/packages/babel-plugin/src/__snapshots__/index.test.js.snap
@@ -201,6 +201,45 @@ exports[`plugin simple import in a complex promise should work 1`] = `
 });"
 `;
 
+exports[`plugin simple import should transform path into "chunk-friendly" name 1`] = `
+"loadable({
+  chunkName() {
+    return \\"foo-bar\\";
+  },
+
+  isReady(props) {
+    if (typeof __webpack_modules__ !== 'undefined') {
+      return !!__webpack_modules__[this.resolve(props)];
+    }
+
+    return false;
+  },
+
+  requireAsync: () => import(
+  /* webpackChunkName: \\"foo-bar\\" */
+  '../foo/bar'),
+
+  requireSync(props) {
+    const id = this.resolve(props);
+
+    if (typeof __webpack_require__ !== 'undefined') {
+      return __webpack_require__(id);
+    }
+
+    return eval('module.require')(id);
+  },
+
+  resolve() {
+    if (require.resolveWeak) {
+      return require.resolveWeak(\\"../foo/bar\\");
+    }
+
+    return require('path').resolve(__dirname, \\"../foo/bar\\");
+  }
+
+});"
+`;
+
 exports[`plugin simple import should work with template literal 1`] = `
 "loadable({
   chunkName() {

diff --git a/packages/babel-plugin/src/index.test.js b/packages/babel-plugin/src/index.test.js
@@ -15,8 +15,18 @@ describe('plugin', () => {
   describe('simple import', () => {
     it('should work with template literal', () => {
       const result = testPlugin(`
-          loadable(() => import(\`./ModA\`))
-        `)
+        loadable(() => import(\`./ModA\`))
+      `)
+
+      expect(result).toMatchSnapshot()
+    })
+
+    it('should transform path into "chunk-friendly" name', () => {
+      const result = testPlugin(`
+        loadable(() => import('../foo/bar'))
+      `)
+
+      console.log(result)
 
       expect(result).toMatchSnapshot()
     })

diff --git a/packages/babel-plugin/src/properties/chunkName.js b/packages/babel-plugin/src/properties/chunkName.js
@@ -29,7 +29,7 @@ function getRawChunkNameFromCommments(importArg) {
 }
 
 function moduleToChunk(str) {
-  return str ? str.replace(/^[./]+|(\.js$)/g, '') : ''
+  return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(/\//, '-') : ''
 }
 
 function replaceQuasiValue(str) {
@@ -65,7 +65,7 @@ export default function chunkNameProperty({ types: t }) {
         importArg.node.expressions,
       )
     }
-    return t.stringLiteral(importArg.node.value.replace(/^\.\//, ''))
+    return t.stringLiteral(moduleToChunk(importArg.node.value))
   }
 
   function getExistingChunkName(callPath) {