Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

编写新的mina-entry-webpack-plugin,使其支持引入原生小程序组件的能力 #25

Closed
wants to merge 32 commits into from

Conversation

run27017
Copy link
Contributor

@run27017 run27017 commented Aug 1, 2018

新的mina-entry-webpack-plugin在packages/new-mina-entry-webpack-plugin下面,其样例app在examples/mina-entry-app-demo下面。新的插件可以支持引入原生小程序组件(.js, .json, .wxml, .wxss),具体内容可参考packages/new-mina-entry-webpack-plugin/README.md.

关于package.json中的author、license、keywords等可以修改,我没有意见。只希望能够尽快集成,投入到生产使用。

望多多交流,非常感谢!

@TravisBuddy
Copy link

Travis tests have failed

Hey @run27017,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

Node.js: 8

lerna run test
lerna info version 3.0.0-rc.0
lerna WARN project Deprecated key "commands" found in lerna.json
lerna WARN project Please rename "commands" => "command"
lerna WARN project Deprecated key "command.publish.ignore" found in lerna.json
lerna WARN project Please rename "command.publish.ignore" => "command.publish.ignoreChanges"
lerna info versioning independent
lerna ERR! npm run test exited 1 in 'mina-entry-webpack-plugin'
lerna ERR! npm run test stdout:

> mina-entry-webpack-plugin@1.0.0 test /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin
> ava


lerna ERR! npm run test stderr:

  ✔ getComponents › get components from mina file
  ✔ getComponents › get components from json file
  ✔ addComponnets › add components from mina entry
  ✔ addComponnets › add components from json entry
  ✔ addComponnets › add module components
  ✔ resolveComponent › resolve single file component
  ✔ resolveComponent › resolve single file component with mina extension
  ✔ resolveComponent › resolve single file component with current context
  ✔ resolveComponent › resolve splited files component
  ✔ resolveComponent › resolve splited files componnet with js extension
  ✔ resolveComponent › resolve splited files component, which config file is null
  ✔ resolveComponent › resolve not existed component
  ✖ resolveComponent › double up to parent 
  ✔ resolveComponent › resolve a mina module component
  ✔ resolveComponent › resolve a splited module component
  ✔ webpack › Compiles project sample (529ms)
  ✔ readConfig › read config from mina file
  ✔ readConfig › read config from json path
  ✔ getPages › get pages
  ✔ getEntries › get entries

  1 test failed

  resolveComponent › double up to parent

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/test/resolveComponent.test.js:92

   91:   const component = resolveComponent(rootContext, request, currentContex…
   92:   t.deepEqual(component, new Component({                                 
   93:     context: rootContext,                                                

  Difference:

    Component {
      assets: Array [ … ],
      context: '/home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/test/fixtures',
  -   fullPath: '/home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/test/fixtures/components/b/b',
  +   fullPath: '/home/hello/workspace/run27017/mina-webpack/packages/new-mina-entry-webpack-plugin/test/fixtures/components/b/b',
      main: '.js',
      request: './components/b/b',
    }

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mina-entry-webpack-plugin@1.0.0 test: `ava`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mina-entry-webpack-plugin@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2018-08-01T08_05_30_451Z-debug.log

lerna ERR! npm run test exited 1 in 'mina-entry-webpack-plugin'
lerna WARN complete Waiting for 1 child process to exit. CTRL-C to exit immediately.

Node.js: 6

lerna run test
lerna info version 3.0.0-rc.0
lerna WARN project Deprecated key "commands" found in lerna.json
lerna WARN project Please rename "commands" => "command"
lerna WARN project Deprecated key "command.publish.ignore" found in lerna.json
lerna WARN project Please rename "command.publish.ignore" => "command.publish.ignoreChanges"
lerna info versioning independent
lerna ERR! npm run test exited 1 in 'mina-entry-webpack-plugin'
lerna ERR! npm run test stdout:

> mina-entry-webpack-plugin@1.0.0 test /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin
> ava


lerna ERR! npm run test stderr:

  ✖ addComponnets › add components from mina entry Error thrown in test
  ✖ addComponnets › add components from json entry Error thrown in test
  ✖ addComponnets › add module components Error thrown in test
  ✖ getComponents › get components from mina file Error thrown in test
  ✖ getComponents › get components from json file Error thrown in test
  ✔ resolveComponent › resolve single file component
  ✔ resolveComponent › resolve single file component with mina extension
  ✔ resolveComponent › resolve single file component with current context
  ✔ resolveComponent › resolve splited files component
  ✔ resolveComponent › resolve splited files componnet with js extension
  ✔ resolveComponent › resolve splited files component, which config file is null
  ✔ resolveComponent › resolve not existed component
  ✖ resolveComponent › double up to parent 
  ✔ resolveComponent › resolve a mina module component
  ✔ resolveComponent › resolve a splited module component
Uncaught Exception: test/webpack.test.js
  TypeError: Object.values is not a function
  readComponentRequests (src/getComponents.js:25:17)
getComponents (src/getComponents.js:13:33)
addComponents (src/addComponents.js:13:20)
getComponentsMapping (src/getEntries.js:23:5)
getEntries (src/getEntries.js:11:29)
MinaEntryWebpackPlugin.addEntries (src/index.js:41:29)
Compiler.compiler.plugin.error (src/index.js:20:10)
Compiler.applyPluginsBailResult (node_modules/tapable/lib/Tapable.js:129:27)
WebpackOptionsApply.process (node_modules/webpack/lib/WebpackOptionsApply.js:235:12)
webpack (node_modules/webpack/lib/webpack.js:37:48)
test/webpack.test.js:15:5
node_modules/rmdir/lib/rmdir.js:31:21


  ✖ Test results were not received from test/webpack.test.js
  ✔ readConfig › read config from mina file
  ✔ readConfig › read config from json path
  ✔ getPages › get pages
  ✖ getEntries › get entries Error thrown in test

  7 tests failed
  2 uncaught exceptions

  addComponnets › add components from mina entry

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/src/getComponents.js:25

   24:   const componentsConfig = config.usingComponents || {}
   25:   return Object.values(componentsConfig)               
   26: }                                                      

  Error thrown in test:

  TypeError {
    message: 'Object.values is not a function',
  }

  readComponentRequests (src/getComponents.js:25:17)
  getComponents (src/getComponents.js:13:33)
  addComponents (src/addComponents.js:13:20)
  addComponentsHelper (test/addComponnets.test.js:8:22)
  Test.t [as fn] (test/addComponnets.test.js:20:15)



  addComponnets › add components from json entry

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/src/getComponents.js:25

   24:   const componentsConfig = config.usingComponents || {}
   25:   return Object.values(componentsConfig)               
   26: }                                                      

  Error thrown in test:

  TypeError {
    message: 'Object.values is not a function',
  }

  readComponentRequests (src/getComponents.js:25:17)
  getComponents (src/getComponents.js:13:33)
  addComponents (src/addComponents.js:13:20)
  addComponentsHelper (test/addComponnets.test.js:8:22)
  Test.t [as fn] (test/addComponnets.test.js:34:15)



  addComponnets › add module components

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/src/getComponents.js:25

   24:   const componentsConfig = config.usingComponents || {}
   25:   return Object.values(componentsConfig)               
   26: }                                                      

  Error thrown in test:

  TypeError {
    message: 'Object.values is not a function',
  }

  readComponentRequests (src/getComponents.js:25:17)
  getComponents (src/getComponents.js:13:33)
  addComponents (src/addComponents.js:13:20)
  addComponentsHelper (test/addComponnets.test.js:8:22)
  Test.t [as fn] (test/addComponnets.test.js:46:15)



  getComponents › get components from mina file

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/src/getComponents.js:25

   24:   const componentsConfig = config.usingComponents || {}
   25:   return Object.values(componentsConfig)               
   26: }                                                      

  Error thrown in test:

  TypeError {
    message: 'Object.values is not a function',
  }

  readComponentRequests (src/getComponents.js:25:17)
  getComponents (src/getComponents.js:13:33)
  Test.t [as fn] (test/getComponents.test.js:9:22)



  getComponents › get components from json file

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/src/getComponents.js:25

   24:   const componentsConfig = config.usingComponents || {}
   25:   return Object.values(componentsConfig)               
   26: }                                                      

  Error thrown in test:

  TypeError {
    message: 'Object.values is not a function',
  }

  readComponentRequests (src/getComponents.js:25:17)
  getComponents (src/getComponents.js:13:33)
  Test.t [as fn] (test/getComponents.test.js:19:22)



  getEntries › get entries

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/src/getComponents.js:25

   24:   const componentsConfig = config.usingComponents || {}
   25:   return Object.values(componentsConfig)               
   26: }                                                      

  Error thrown in test:

  TypeError {
    message: 'Object.values is not a function',
  }

  readComponentRequests (src/getComponents.js:25:17)
  getComponents (src/getComponents.js:13:33)
  addComponents (src/addComponents.js:13:20)
  getComponentsMapping (src/getEntries.js:23:5)
  getEntries (src/getEntries.js:11:29)
  Test.t [as fn] (test/getEntries.test.js:7:29)



  resolveComponent › double up to parent

  /home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/test/resolveComponent.test.js:92

   91:   const component = resolveComponent(rootContext, request, currentContex…
   92:   t.deepEqual(component, new Component({                                 
   93:     context: rootContext,                                                

  Difference:

    Component {
      assets: Array [ … ],
      context: '/home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/test/fixtures',
  -   fullPath: '/home/travis/build/tinajs/mina-webpack/packages/new-mina-entry-webpack-plugin/test/fixtures/components/b/b',
  +   fullPath: '/home/hello/workspace/run27017/mina-webpack/packages/new-mina-entry-webpack-plugin/test/fixtures/components/b/b',
      main: '.js',
      request: './components/b/b',
    }

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mina-entry-webpack-plugin@1.0.0 test: `ava`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mina-entry-webpack-plugin@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2018-08-01T08_05_49_265Z-debug.log

lerna ERR! npm run test exited 1 in 'mina-entry-webpack-plugin'
lerna WARN complete Waiting for 1 child process to exit. CTRL-C to exit immediately.

1. 部分测试中引入了本地地址
2. 使用Object.values,不支持node 6
@run27017
Copy link
Contributor Author

run27017 commented Aug 1, 2018

提交了新的内容,针对以上的测试不过的问题。

@TravisBuddy
Copy link

Hey @run27017,
Your changes look good to me!

@run27017
Copy link
Contributor Author

run27017 commented Aug 3, 2018

看来是我之前想得不够全面。

关于第一点,确实是的,node_modules的目录在小程序里面会失效。这个看来得另想解决办法,因为我假定的file-loader配置是[path][name].[ext]

第二点,你说得还是很中肯的,我先去看看相关的约定。

嗯,本次的pull request只是个尝试,我会在近期对其做完善。

1. 只对`~`开头的路径解析node_modules
2. 解析node_modules的时候,参考package.json的main属性
3. 等等
@TravisBuddy
Copy link

Hey @run27017,
Your changes look good to me!

@run27017
Copy link
Contributor Author

run27017 commented Aug 8, 2018

啊哈,我提交了新的commits。新的commits先不纠结形而上的东西了,主要是把功能完善,而且是尽可能地适配到现有的mina-loader。

  1. 支持引入src中的组件(单文件的和多文件的)、支持引入node_modules中的组件
  2. 引入node_modules组件后,entry name会修正为_node_modules_的形式
  3. 不带~的是引入src中的组件,前缀~是引入node_modules的组件

现在唯一需要注意的地方,就是引入组件的时候必须带上后缀名。但是插件本身是不带后缀名也可以正常生成entry的,mina-loader只需要后续补充支持它就可以了。

示例项目仍然是examples/mina-entry-app-demo,针对_node_modules_的问题,增加了一个loaders/change-path-loader,放在file-loader前面做适配。

@TravisBuddy
Copy link

Hey @run27017,
Your changes look good to me!

@run27017
Copy link
Contributor Author

进展如何?需要我帮助的地方吗?

@imyelo
Copy link
Member

imyelo commented Aug 24, 2018

@run27017 实在抱歉,目前在处理其他分支,还没来得及 review,接下来会优先处理。

@run27017
Copy link
Contributor Author

@imyelo ok,收到。未来的进展是如何计划的,是直接合还是调整mina-loader后再一起合?

@imyelo
Copy link
Member

imyelo commented Sep 12, 2018

@run27017 这个 PR 由于是新开目录,所有文件都是 added 状态,不好比对合并,所以我参考你的实现在主分支的基础上重新起了一个 PR #40 ,希望不会介意 😊。

#40 的实现细节:

  • 通过 resolve 模块的 extensions 选项 支持在 mina-loader 中解析省略扩展名的依赖文件路径(即原生 / 经典小程序的路径)。
  • 在 mina-entry-webpack-plugin 中内置 mina-virtual-loader,将经典组件(即文件分离的小程序组件)的请求交给该 loader 处理,从而合并成虚拟的 mina 单文件组件。
  • 由于 mina-entry-webpack-plugin 只支持解析已知的文件类型,所以单独抽离出 ConfigReader 类,使得我们可以通过实现其 getConfig 接口来扩展解析不同的文件类型。在插件中内置了单文件组件和经典组件的两种 ConfigReader。(这一设定与原 PR 相似)

@run27017
Copy link
Contributor Author

@imyelo 好的!最新的版本是多少?脚手架sao mina app能够应用了吗?

@imyelo
Copy link
Member

imyelo commented Sep 13, 2018

已更新至 1.0.0-7

但因为近期更新比较多,所以模板还没来得及一起更新;可以在旧项目中将这几个包的版本号暂时锁定在 1.0.0-7

  • @tinajs/mina-loader
  • @tinajs/mina-entry-webpack-plugin
  • @tinajs/mina-runtime-webpack-plugin

另外最新 prerelase 的版本依赖 webpack 4,所以可能也需要升级一下 webpack 以及 webpack.config.babel.js (diff)。

@run27017 run27017 deleted the mina-entry branch November 23, 2018 09:25
@baranwang
Copy link

这个最后有合并到 master 吗?我 3 月初新建的项目,好像还是不能引入原生组件诶~

@imyelo
Copy link
Member

imyelo commented Apr 10, 2019

这个最后有合并到 master 吗?我 3 月初新建的项目,好像还是不能引入原生组件诶~

@baranwang 合并了 #40 。你项目内 mina-loader 和 mina-entry-webpack-plugin 的版本号是?

@baranwang
Copy link

mina-loader: 1.5.0
mina-entry-webpack-plugin: 1.1.0

是需要在 webpack.config.js 中做什么特别配置吗?

@imyelo
Copy link
Member

imyelo commented Apr 10, 2019

mina-loader: 1.5.0
mina-entry-webpack-plugin: 1.1.0

是需要在 webpack.config.js 中做什么特别配置吗?

不需要的,有报异常吗?看起来已经是最新的版本,这里有个 示例

@baranwang
Copy link

编译是正常编译的,但是编译后只引入了 js 文件,其他文件没有引入

image

image

@baranwang
Copy link

我的 webpack.config.js 是复制的原先的项目的,不知道有没有问题

const { resolve } = require('path')
const webpack = require('webpack')
const MinaEntryPlugin = require('@tinajs/mina-entry-webpack-plugin')
const MinaRuntimePlugin = require('@tinajs/mina-runtime-webpack-plugin')

const CopyPlugin = require('copy-webpack-plugin')

const isProduction = process.env.NODE_ENV === 'production'

const loaders = {
  script: 'babel-loader',
  style: {
    loader: 'postcss-loader',
    options: {
      config: {
        path: resolve('./postcss.config.js'),
      },
    },
  },
}

module.exports = {
  context: resolve('src'),
  entry: './app.mina',
  output: {
    path: resolve('dist'),
    filename: '[name]',
    publicPath: '/',
    globalObject: 'wx',
  },
  module: {
    rules: [
      {
        test: /\.mina$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@tinajs/mina-loader',
            options: {
              loaders,
              languages: {
                less: [
                  'postcss-loader',
                  {
                    loader: 'less-loader',
                    options: {
                      compress: true,
                    },
                  },
                  {
                    loader: 'style-resources-loader',
                    options: {
                      patterns: [resolve('src/_var.less')],
                    },
                  },
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.mina$/,
        include: /node_modules/,
        use: '@tinajs/mina-loader',
      },
      {
        test: /\.js$/,
        exclude: [/node_modules/, resolve('src/utils/ald')],
        use: loaders.script,
      },
      {
        test: /\.(css|wxss)$/,
        exclude: /node_modules/,
        use: loaders.style,
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'assets/[name].[hash:6].[ext]',
          },
        },
      },
      {
        test: /\.wxs$/,
        use: {
          loader: '@tinajs/wxs-loader',
          options: {
            name: 'wxs/[name].[hash:6].[ext]',
          },
        },
      },
      {
        test: /\.wxml$/,
        use: [
          {
            loader: 'relative-file-loader',
            options: {
              name: 'wxml/[name].[hash:6].[ext]',
            },
          },
          {
            loader: '@tinajs/wxml-loader',
            options: {
              raw: true,
              enforceRelativePath: true,
              root: resolve('src'),
            },
          },
        ],
      },
    ],
  },
  resolve: {
    symlinks: true,
    alias: {
      '@': resolve('src'),
    },
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
      DEBUG: false,
    }),
    new webpack.DefinePlugin({
      isProduction,
      API_URL: JSON.stringify('https://'),
      ASSET_URL: JSON.stringify('https://'),
    }),
    new MinaEntryPlugin({
      map: entry => ['es6-promise/dist/es6-promise.auto.js', entry],
    }),
    new MinaRuntimePlugin(),
    new CopyPlugin([
      { from: resolve('src/ext.json'), to: resolve('dist/ext.json') },
    ]),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'common.js',
      minChunks: 2,
      minSize: 0,
    },
    runtimeChunk: {
      name: 'runtime.js',
    },
  },
  mode: isProduction ? 'production' : 'none',
}

@imyelo
Copy link
Member

imyelo commented Apr 10, 2019

@baranwang 引用 miniprogram-slide-view<config> 内容是?

@baranwang
Copy link

<config>
{
  "navigationBarTitleText": "",
  "enablePullDownRefresh": true,
  "usingComponents": {
   // ...
    "slide-view": "~miniprogram-slide-view",
  }
}
</config>

@imyelo
Copy link
Member

imyelo commented Apr 10, 2019

可能是因为 miniprogram-slide-viewmain 指向了 index.js,试试这样呢:

  "usingComponents": {
   // ...
-    "slide-view": "~miniprogram-slide-view",
+    "slide-view": "~miniprogram-slide-view/miniprogram_dist/index",
  }
}

@baranwang
Copy link

OK 啦~ 太感谢啦~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants